Какие медиа запросы лучше сделать при верстке сайта?

Question

[Вадим В]

Есть предположим макет с десктопной версией(1200px) и для мобильных(480px). Вопрос, можно ли сделать перестройку блоков, как в мобильной версии, раньше чем экран достигнет ширины 480px, например когда ширина будет 576px, или это будет ошибкой? То есть, ожидается, что от дисктопной версии до мобильной будет резина, но если блоки уже не могут дальше сжиматься, это начинает выглядеть плохо, то я могу ведь раньше перестроить их, как в мобильной версии?

Comments

[WapSter]

Можно конечно, но тут больше от заказчика зависит)

Answer 1

[Арсений Матыцин]

У css-фрейморков типа бутстрапа есть отработанные медиазапросы, которых в общем и целом хватает за глаза и за уши.

А дальше надо прыгать от конкретной задачи, например размеры шапки на медиазапросах может напрямую зависеть, как от размера экрана, так и от наполенения навигации в строку. У меня на практике бывали случали, когда добавив 1 пункт меню, приходилось переписывать медиазапросы таким образом, чтобы его не переносило на новую строку и не ломало верстку. Впрочем, это частные случаи.

Answer 2

[aftar]

Да, можешь желать медиа запросы какие угодно, напимер media (min-width: 480px and max-width: 576px) { @content; }

Answer 3

[Евгений Вольф]

То есть, ожидается, что от дисктопной версии до мобильной будет резина, но если блоки уже не могут дальше сжиматься, это начинает выглядеть плохо, то я могу ведь раньше перестроить их, как в мобильной версии?

Вы можете сделать перестроение хоть на каждый пиксель ширины (высоты и т.п.), или указывать диапазоны (min/max). Если я правильно понял Ваш вопрос - Вы можете сделать перестроение отдельно взятых элементов начиная с разрешение в котором [как Вы это обозначили] "блоки уже не могут дальше сжиматься", т.е. адаптировать эти самые блоки "отдельно" от других элементов.

В том числе, можно отдельно переопределить свойства для отдельно взятых блоков начиная с нужного Вам разрешения.