Максимальная ширина контейнера в сетке под мобильные разрешения?
Сразу к сути. Например, если следовать сетке Bootstrap4 , последнее разрешение (для мобильный устройств) начинается от 576 и ниже, при этом нет max container width (максимальной ширины контейнера). Отсюда вопрос, как дизайнеру правильно сделать сетку к этому разрешению, ведь сайт на мобильном устройстве, например, с разрешением 576px и на мобильном устройстве 320px будет смотреться по разному? Правильно ли будет изначально брать макет с меньшей шириной 320px и делать на нем универсальное решение, которое будет смотреться одинаково и при увеличении до 576px, то есть идти от меньшего к большему?
Правильно ли будет изначально брать макет с меньшей шириной 320px и делать на нем универсальное решение, которое будет смотреться одинаково и при увеличении до 576px, то есть идти от меньшего к большему?
Руководитель frontend направления, предприниматель
Да, это расстояние между брейкпойнтами, дизайн для которого проектируется для минимального, а задаче верстальщик сделать его рабочим до следующего (большего).
Конечно, если есть нюансы (а они есть, к примеру на пересечении десктопа и таблетки (горизонтальный формат)) их тоже неплохо бы прорабатывать на уровне дизайна.
При этом только для мобильных устройств ( 576px >= ), лучше взять макет с меньшей шириной. А остальные макеты лучше брать с максимальной шириной брейкпоинта, например, для >=1200px , лучше брать макет с шириной 1920px?
Алексей Орлов, в среднем делают 3+ макета.
1. Мобильный, чтобы покрыть потребности интерфейса от минимального (320) до, скажем, таблеток (768),
2. Таблетки идут отдельно до минимального десктопа (1024).
3. И десктоп. Тут можно взять чуть больше 1200px макет, хоть 1920, так как верстка все равно будет ограничена container-параметрами. А макет вкрая будет виден попросту потому что он будет выходить за рамки контейнера.
Пример
3 макета, потому что это достаточно дешево, ну и верстальщик не дебил же по своей сути.
Простой
