На сколько экранов делать media-запросы?

Question

[DrunkMaster]

Не очень хорошо разбираюсь в ассортименте устройств и планшетов.
Какую ширину считать максимальной шириной для мобильных устройств по высоте. У iphone вроде ширина будет 320px, у nokia lumia например 480px. Ещё есть нестандартные планшеты всякие типа asus с диагональную меньше iPad там если их вертикально повернуть то будет писелей 600 навскидку.
Сколько media-блоков min-max вы делаете и для каких диапазонов?

Answer 1

[Сергей delphinpro]

Я вижу два варианта

Если у вас возможно фиксировать ширину сайта, то делаем примерно как в бутстрапе точки 576-768-992-1200, контейнеры чуть меньше точек. За счет того, что в пределах каждого брикпойнта ширина фиксирована - никаких проблем. Количество точек добавить/убавить по вкусу/ТЗ

Если сайт резиновый, то количество основных точек выбирается примерно как в первом варианте. Плюс дополнительно ставится брикпойнт везде, где ломается дизайн. Этот вариант, понятно более трудозатратен.

Answer 2

[Алексей Струков]

3 брейкпоинта вполне достаточно:
600, 900, 1200

Дизайн обычно рисуют в 3 вариантах: телефон, планшет и десктоп, поэтому увеличивая количество брейкпоинтов мы увеличиваем объем работы для дизайнера и затраты на разработку у заказчика. Ну либо придется самому додумывать как оно будет перестраиваться на брейепоинтах не прорисованных дизайнером.

PS: у Гугла кстати используется около 8 брейкпоинтов)
Если интересен их подход, то можно найти рекоммендуемые ими значения в руководстве по Material Design