Какие разрешения стоит выбирать для границ перехода в адаптивной верстке?

Question

[Вадим Белкин]

По началу привык к botstrap, где устройства делились на мобильные (меньше 768px), планшеты (от 768px до 992px), компы (от 992px до 1200px) и большие мониторы (от 1200px).
С момента появления такого деления на экраны появилась куча устройств, и под разрешения от 768px до 992px попадают уже и телефоны, а в разрешениях от 992px до 1200px большую часть заняли планеты.
Какие сейчас разрешения стоит выбирать для границ перехода в адаптивной верстке, чтобы охватить самые используемые устройства (телефоны, планшеты, пк)? Изменились ли эти границы перехода, и хватает ли их на данный момент этого кол-ва переходов тем кто занимается адаптивным дизайном/версткой?

Посоветуйте или подскажите, на какие 3-5 границ (размеров ширины экрана) выбрать для адаптивного сайта.

Answer 1

[Денис Инешин]

Фаерфокс -> Открыть меню -> Разработка -> Адаптивный дизайн.
Вуаля, там есть самые популярные варианты + возможность класть смарфон на бок.

Границы: смартфон (iphone 4,5 и т.д.) -> лопата (ipone 6 plus, galaxy note) -> мини планшет (ipad mini, google nexus 7) -> большой планшет (ipad) -> десктоп

+ еще очень рекомендую эту статью: habrahabr.ru/post/237931

+ вообще, контент должен быть в какой-то мере резиновым, скажем от 320 до 370 просто резина, а только 370+ переход.

Comments

[Вадим Белкин]

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

[Денис Инешин]

Вадим Белкин: смартфон (iphone 4,5 и т.д.) -> лопата (ipone 6, galaxy note) -> мини планшет (ipad mini, google nexus 7) -> большой планшет (ipad) -> десктоп

[teotlu]

Денис Инешин: а в px? Гуглом пользоваться умею, просто человек-то задал конкретный вопрос, и мне тоже интересно :)

[Денис Инешин]

teotlu: ну давайте посмотрим. Смартфоны: 320-375, множитель от 1х до 2х, лопаты от 350 до 480, множитель 2х-3х. Мелкие планшеты, от 600 до 700, множитель 2х, крупные планшеты от 768 до 1024, множитель 1х-2х. Ну и десктоп, от 1024 пх. Множитель 1х - 2х(у нового аймака ретина).

[Вадим Белкин]

Денис Инешин: У меня как раз сейчас первый вопрос с выбором кол-ва границ стоит. Стоит ли так много их делать? Пока остановился на 3-4. А второй вопрос, с 1024 ли десктопы сейчас начинаются, а не с 1280 (это я по статистике google пары сайтов что я делал, там 1024 среди ПК занимает чуть ли не последнее место среди пользователей), и если все что меньше 1280 отнести к планшетам то остальные границы соответственно немного передвинутся и опять же нужно как-то все грамотно распределить.

Вот такие у меня сейчас спорные моменты.

[Денис Инешин]

Вадим Белкин: мне доводилось делать сайты, где я под каждый размерчик вылизывал + экран вертикально/на боку. Доходило до 10-12 вариантов. Но при хорошем проектировании можно обойтись 3-5 вариантами, добавив грамотную резину.

[teotlu]

Денис Инешин: спасибо :)

[kn1ght_t]

Денис Инешин: что значит множитель? на что он влияет и как его использовать в медиа-запросах и при верстке?

[Денис Инешин]

kn1ght_t: в ответе есть ссылка на статью на хабре, почитайте

Answer 2

[Владимир]

Впринципе, размеры в Bootstrap'е вполне соответствуют реальности, поскольку в новых устройствах повышается количество физических пикселей, а не логических. Поэтому каким бы ни был экран, пусть хоть 4-5к, но при телефонном размере в 5" ему необходимо отдавать телефонную страницу на 360-480px.