Responsive web design + media quaries. Как верстать адаптивно?

Question

[Андрей Кузьмин]

Всем привет, по ходу изучения адаптивной верстки зашел в небольшой тупик. А именно как адаптировать внутренние элементы - заголовки, логотипы и т.д. ?
Я делаю резиновый макет + резиновые картинки и добавляю медиа запросы. Вроде бы все нормально, но медиа у меня получается очень много (11 шт.), через каждые 200px контент вываливается из блоков. Подскажите как врубится по хорошему в эту тему?

Answer 1

[Дима Долготер]

Нужно глянуть всю верстку вообщем. Но еще есть вопрос, используешь фреймворки типа бутстрап? Если нет, то глянь что это, советую. Меньше кода будешь писать

Comments

[Андрей Кузьмин]

Бутстрап планировал позже учить вместе с препроцессорами. Сейчас хочу вникнуть по нормальному и сверстать пару сайтов руками. Вот я сделал один сайт, может есть какие советы в какую сторону думать чтобы улучшить подход?
https://jsfiddle.net/Andfree/hk70p2pv/1/
andfree503.github.io

[Дима Долготер]

я бы сделал еще

body{
padding:10px;
overflow-x:hidden;
}

[Андрей Кузьмин]

Дима Долготер, А так по коду все нормально? Мне каким то не здоровым такое количество запросов)

[Дима Долготер]

Та вроде да. Читаемо. Сразу пользуйся БЭМ. Я не пользуюсь, но надо)

[Ankhena]

Андрей Кузьмин, Бутстрап не панацея, если дизайн не был под него адаптирован.

Мне каким то не здоровым такое количество запросов)

Нормально. Сколько есть, столько есть. Все зависит от дизайна и его перестроений. И чем дальше дизайн от сеток, тем больше точек слома. Посмотрев свежим взглядом можно какие-то объединить.
Не очень хорошо, когда свойства одного и того же блока переписываются при разных условиях по много раз. (Утрировано: больше 300точек цвет красный, >400 зеленый, >500 синий, потом снова красный) Тогда интервалы лучше переписать на от 300 до 400, от 400 до 500 и т.д.

[Дима Долготер]

Ankhena,
я просто хотел чтоб он посмотрел код бутстрапа. там тоже много брейкпоинтов, чтоб не нервничал)

[Ankhena]

Дима Долготер, понять как работает бутстрап в любом случае полезно, я согласна.

[Андрей Кузьмин]

Ankhena, Дима Долготер, Спасибо за ответы, они меня успокоили)

[alex-1917]

Андрей Кузьмин, фенибут действует быстрее

Answer 2

[Sama Samsonov]

Попробуй таким образом

@media (min-width: 320px) and (max-width: 480px) {
  
  //CSS
  
}

Answer 3

[alex-1917]

Щас ДВА запроса актуальны, какие 11??!!!!!! ну край ТРИ.

@media (max-width:1199px) {} //редко использую
@media (max-width:991px) {} //довольно часто юзаю вась
@media screen and (max-width:767px) {} //то что дохтор прописал
@media (max-width:479px) {} // для маньяков)))

основная хитрость, который ты бы давно уже мог подсмотреть в том же бутстрапе - основной контейнер делается шириной 100% + лимит для экранов выше 991, например max-width=1040px - ВСЁ!!!

мой вариант проверяется в каждом проекте на реальных устройствах (афони все от 4s до восьмерки, ябло-планши все, пара ябло-буков, самсунги 4 смарта и три планша, за глаза!!) так что никого не слушай, Alex-1917 дело говорит!!

Comments

[Андрей Кузьмин]

Вот здесь я так и сделал, для контейнера 100% и ограничение 1280px. Проблемы возникают с внутренними элементами, например заголовок выпадает каждые 100px, margin становится ну просто огромным - мне это не совсем понятно.
https://jsfiddle.net/Andfree/hk70p2pv/1/
andfree503.github.io