Как правильно указывать width в @media?

Question

[chelnokov_a]

Верстаю на флексах. Учусь точнее. Не могу понять, как делать нормально адаптив чтобы по тысяче раз не прописывать медиа-запросы. когда при сужении все летит. Есть стандартные величины 1024, 678, 480, 320. Предусмотрены в макете. Но при сужении ширины экрана моя верстка летит до того, как достигает 1024. То есть, media приходиться прописывать раньше. И так очень много раз, пока до 320 не дойдет.

Как правильно выходить из этой ситуации?

Comments

[Сергей delphinpro]

Рука так и тянется к кнопке пожаловаться с формулировкой "Невозможно дать однозначный ответ".
Но я не буду.
Просто скажу, что панацеи нет.
Можете посмотреть реализацию брикпойнтов с контенейрами в бутстрапе, например.
Или использовать процентные ширины.

[WapSter]

От этого спасает в большей степени mobile first верстка. Ну а так иногда приходится кучу раз их прописывать. Еще со временем рука набивается многие элементы делать резиновыми, что в них даже не приходится прописывать медиа запросы.

[chelnokov_a]

Сергей delphinpro, Сейчас наткнулся на такую вещи. Прописывать body минимальную ширину для каждого брэкпоинта. И тип как не сужай ничего не летит вроде. Но я пока еще толком не протестил как это работает. На практике так делают?

В том плане. У меня по макету. До определенной ширины экрана должна быть определенная верстка.

[Сергей delphinpro]

chelnokov_a, я всегда рекомендую вообще не использовать body в верстке. Особенно для раскладки. Максимум — css reset и фон.

[Ankhena]

chelnokov_a, Ну и что, что брейкпоинтов не 3, а больше. Сколько их, обычно зависит от контента и макета.

Прописывать body минимальную ширину для каждого брэкпоинта.

Не надо так делать, до добра не доводит.
И такое ощущение, что вы пишете условия для ширины не в ту сторону. Потому что при адаптиве нет ни горизонтальных полос прокрутки, ни нужды задавать мин ширину для body.

По теме: смотрите в макет, вычисляйте что от чего зависит, где фиксированные размеры, где % (или vw vh) и т.д.

Дальнейшие рекомендации при наличии конкретных вопросов.

[Mak_Pet]

Дайте конкретный пример верстки.

Answer 1

[Leo]

Простите, если я слишком прямолинеен, но рядовой юзер имеет опредиленное разрешение экрана (он не разработчик). Максимум 2, если это смена ориентации экрана. Если вы собираетесь учитывать ВСЕ кейсы по ПИКСЕЛЯМ, т.е. играться потехи ради, то это ради прикола, а не работы.
Статистику по используемым разрешениям вы можете найти в Гугле. К примеру, вам стоит учитывать 4к, 2к, 1280 (не обязательно, но желательно), 1024 (планшеты), 800 и ниже (мобилы).
Ещё раз обозначу, только условленные разрешения вам нужны. Не играйтесь, а работайте.

Answer 2

[Константин Давыдов]

В responsive вёрстке это нормальная практика, когда много media-запросов. Причём у разных элементов, они могут быть свои.
А вот у adaptive, там в основном только самые популярные breakpoints учитываются, типа как у bootstrap.