Какой должна быть ширина макетов для адаптивки?

Question

[Посторонним В.]

Обычно есть три макета - десктопный, планшетный и мобильный.
Мобильный рисуется на условно минимальной ширине - 320px. До 767px включительно элементы просто растягиваются по ширине. Это логично, т.к. нужно, чтобы всё поместилось на минимальной ширине, а для чуть больших верстальщик уже что-то придумает.
Планшетный рисуется на условно минимальной для планшетов ширине - 768px. В диапазоне 768-1024px (ширина iPad Pro, это еще планшет) элементы также просто растягиваются на всю ширину по определенной логике.

Десктопный макет рисуется... И тут логика ломается. Десктопный макет сейчас почему-то принято рисовать при ширине 1366px. При этом что должно происходить с элементами (который не помещаются в частности) в диапазоне 1025-1365px - абсолютно не ясно. Десктопный макет уже не подходит, а планшетный еще не работает.

Так почему же рисуют на 1366, а не на 1025, например?

Answer 1

[dom1n1k]

Потому что 1366 это сейчас самый популярный размер экрана в интернете.
Если вы откроете раздел ноутбуков в любом компьютерном магазине, то увидите, что весь бюджетный сегмент - это сплошь 1366*768.

Answer 2

[Виталий]

Я думаю, можно отталкиваться от текущего грида Bootstrap 4

0 - 575,
576 - 767,
768 - 991,
992 - 1199
1200 - ...

Comments

[Посторонним В.]

это же 5 макетов. И по такой логике страница будет выглядеть по-разному на планшете с шириной 768 и 1024px.

[Виталий]

Уберите ненужные промежутки.
К примеру:
0 - 767,
768 - 991,
992 - 1199
1200 - ...

[Виталий]

Да и вообще, имхо, привязываться сейчас к типу устройства неправильно, нужно привязываться исключительно к разрешению. А там, пусть устройство хоть холодильником будет :)

Ну и в целом, не вижу ничего плохого, если страница на планшетах с разным разрешением будет выглядеть по-разному. Допустим, если взять классический айпад, то в разных ориентациях (вертикальная/горизонтальная) - подсовываем разный промежуток. И это вполне нормальная практика.

[Виталий]

Вас пугает, что 5 макетов... а на качественном проекте это нормальная, и это мы еще про ретину забыли :)
Поймите, с теми проблемами, которые вы сейчас не учтёте при проектировании интерфейса - ленивый верстальщик заморачиваться не будет.

[Антон Спирин]

Виталий, в больших проектах никто столько не делает. Чаще двумя обходятся, мобильные + десктопы. Опционально планшеты.

[Виталий]

Антон Спирин, всё зависит от сложности проекта, но таки да, в большинстве случаев 2-3 достаточно. Если дизайн вполне себе продуманный и нормально масштабируемый - 2 с головой. На моей практике максимум рисовали 4. Но(!), если дизайнер нифига не продумал, как будет выглядеть блок при макс/мин разрешении внутри одного брэйкпоинта, то тут уже начинаются муки выбора)