Немного о media-queries и брейкпойнтах

Бонус: Breakpoints как в SASS, но только в LESS

Одна из самых часто встречающихся ошибок в использовании media-queries — это жесткое задание трех-четырёх точек перелома (или брейкпойнтов, как угодно). Понятно, откуда она возникает — большинство популярных фреймворков работает именно так. Более того, большинство популярных сеток работает именно так. И дело даже не в количестве этих точек, а в самом принципе — вот есть n точек, их и используй. Но ведь сам подход в корне неверен. Что, если какую-то часть страницы для оптимального отображения нужно изменять не от 700px, например, а от 600? Добавлять еще одну переменную? Нет, чаще верстальщик меняет элемент от 700px, и даже не думает о том, что некоторые пользователи, у которых ширина браузера, скажем, 680px (половина от горизонтального размера одного из самых популярных разрешений), будут видеть мешанину.

Именно поэтому нужно как о страшном сне навсегда забыть про жестко заданные точки перелома. Единственный вариант — это более-менее индивидуальная работа над элементами. Но каждый раз писать по миллиону разных правил весьма утомительно, не так ли? Тут на помощь приходят препроцессоры.

Недавно был впечатлён возможностями библиотечки breakpoint для SASS. Если коротко — она делает процесс написания media queries в разы проще. Передаешь один параметр — получаешь @media (min-width: %параметр%). Передаешь два — получаешь min-width и max-width. Ну и так далее. Быстрый гуглинг не показал ничего похожего для LESS.

К счастью, LESS умеет в JS (и это то самое главное в LESS, что делает его, как мне кажется, гораздо более полезным для фронтендера, чем SASS), поэтому написать собственный миксин не составит труда.

Сам миксин (там же есть развернутая версия с комментариями):

Опишу примеры использования. По сути миксин умеет всё то же, что и breakpoint-sass, кроме того, что описано в последнем абзаце. То есть никаких дефолтных значений (почти), никакой особой поддержки device-pixel-ratio (ребята, это умеет делать Post CSS).

Продолжение «Немного о media-queries и брейкпойнтах»