Ограничение по контрольным точкам
Друзья, всем привет! Подскажите, пожалуйста, при создании медиазапросов, как правильней спроектировать контрольные точки? Часто в сети можно встретить руководства по типу "создаем контрольные точки для десктопов, планшетов, смартфонов" - говорю условно. Например, в том же бутстрапе их всего 5. Просто у меня при вёрстке получается около 20. Это нормально? Не получается впихнуть всё в такое маленькое количество. Большое спасибо за ответы)
Ответы (1 шт):
Просто не надо делать контрольные точки на каждый вариант разрешения экрана, вот и все. Для промежуточных значений сайт должен быть резиновым.
Сперва оцениваете на каких системах будет отображаться ваш сайт. Например, вы решили, что он должен работать на разрешениях от 480 пикселей (не очень старый айфон, программные пиксели) и выше вплоть до Full HD (1920 пикселей) по горизонтали. Все, что выше Full HD, к примеру, будет просто обрамлено полями по бокам, как, например, наш любимый StackOverflow (который заточен под 1280 пикселей, если кто не в курсе).
первая (а точнее, нулевая) контрольная точка у вас будет... подразумеваемая. Это те самые минимальные 480 пикселей. Это значит, что на устройства с меньшим экраном (айфон-4, например) вам наплевать, и все, что вам надо - чтобы был горизонтальный скроллинг.
min-widthдляbody, и вуаля.теперь уж действительно первая точка - это та ширина экрана, при которой дизайн под мелочевку приводит к некрасивому виду. Обычно это 640 пикселей (= 1280 физических пикселей на большинстве андроидов, например).
вторая точка - свыше 640 но до ширины среднего планшета включительно. Например, 800 пикселей (ширина 8" планшетов на андроиде). В этот диапазон попадает, например, айпад в вертикальной ориентации.
третья точка - планшеты/смартфоны в альбомном виде и мелкие мониторы. Это может быть 1024 или 1280 пикселей. Т.е., медиа-запрос на диапазон 800 < X <= 1024, например.
четвертая точка - 99% дисплеев для нормальной работы, а также телевизоров - 1920 пикселей. Т.е., например, 1280 < X <= 1920.
все, что выше, отдельной точки обычно не требует (обернули весь контент во враппер с максимальной шириной 1920 минус скроллбар, и радуетесь), но если надо, можно и медиа-запрос на X > 1920 накатать - например, для показа контента в две колонки на 4к экранах.
Ну а в пределах каждого из этих диапазонов дизайн должен быть нормально резиновым, либо оборачивать во враппер размером с минимальную ширину минус скроллбар.
Как-то так.
ИМХО.