С момента первых свёрстанных макетов меня беспокоит тема контрольных точек (брейкпоинтов) для медиа-запросов. Какие значения использовать? По какому принципу их выбирать? Сколько их должно быть?
Наиболее популярна система контрольных точек Bootstrap: 576-768-922-1200-1400. Я придерживаюсь вариации системы 600-900-1200-1800 из статьи «The 100% correct way to do CSS breakpoints» Дэвида Гилбертсона, она показалась мне более логичной.
Предустановленная тема Dawn в магазинах на платформе Shopify использует систему 749/750-989/990 и двумя дополнительными контрольными точками: 650 и 1200. В интернете есть статьи и видео, где люди делятся собственными подходами.
Так какую же систему выбрать? В Set Studio пришли к выводу: идеальных контрольных точек не существует. В рамках эксперимента было собрано более 120000 источников, из которых получилось более 2300 уникальных размеров экранов.
Ни одна система контрольных точек не покроет такое количество экранов. Всё потому что в современном мире сайт может быть открыт везде, где есть браузер. А браузер сейчас есть даже там, где его не ожидаешь увидеть.
К этому добавляется огромное разнообразие моделей мониторов, ноутбуков, планшетов, смартфонов и часов. Плюс разные режимы отображения: разделённый экран, предпросмотр ссылок, увеличенный масштаб, упрощённый режим, Picture-in-Picture.
Этот факт подводит к мысли об отказе от контрольных точек для медиа-запросов. Пусть
@media используется по прямому назначению — определению медиа-функций prefers-*, print, pointer, forced-colors, orientation, color-gamut и других. А вместо контрольных точек применить «алгоритмическую вёрстку» — описание в CSS некоторых правил (алгоритмов), по которым браузер сам решает, как размещать и отображать элементы. Подробнее об этом расскажу в отдельном посте.
#css
