Советы по использованию media query

Как часто вы используете такой breakpoint?

Почему вы это назвали точкой остановки?

С выходом каждого нового девайса меня все большая паника охватывает: мало что в разных ОС стараются сделать стандартным разное разрешение, так и в девайсах одного вендора порой наблюдается разброд и шатание, что считать нормально шириной для одного и того же количества дюймов диагонали. Про китайские поделия (и поделия не из мейнстрима в принципе) говорить не приходится, экраны ставят какие могут, порой даже ОС устройства, кажется, с удивлением узнает, с каким разрешением ей предстоит работать…

А с идиотским поветрием «сделаем fullhd на как можно меньшей диагонали экрана», когда юзер все чаще ставит себе увеличение уже средствами ОС (и мы все знаем, как это порой отрабатывается) понять, сколько дизайн займет на экране, все труднее и труднее.

Так что media query — штука хорошая (где же оно было лет 10 назад?!), но вот если бы еще и вендоры договорились по поводу разрешения своих девайсов…

Увидев

Условная загрузка

почему-то подумал, что будет рассказ о том, что на самом деле возможно сделать что-то вроде

@media all and (max-width: 960px) {
    @import url(/css/mobile.css);
}

А мысль, собственно, хорошая. Вы не знаете, работает ли это? И если да — позволяет ли это сэкономить трафик, реально ли это будет условная загрузка?

Относительные единицы измерения

Вместо использования фиксированных размеров, лучше использовать относительные единицы для определения breakpoints. На хабре уже многократно была раскрыта тема использования относительных размеров в верстке. Вот неполный список статей: здесь, здесь, здесь. Приведу лишь самый главный довод — это позволит браузерам изменять дизайн в зависимости от уровня установленного размера зума пользователем, в результате чего пользователь увидит более приятный, более доступный для просмотра сайт.

Это полная чушь.

 

Во-первых, зум пиксельных значений прекрасно работает во всех браузерах, начиная как мимимум с IE8. Я специально запустил виртуалку с WinXP, чтобы проверить. Более древнего IE под рукой не оказалось, но это и не важно — доля IE7 составляет в России всего 0.5%, IE6 — 0.1%, и то, по большей части, за счет госучреждений.

Шрифты, размер которых задан в пикселах, зумятся нормально. Нормально срабатывают и media queries, ширина для которых задана в пикселах. Вы крутите колесико мыши с зажатым Ctrl, и компоновка страницы перестраивается по мере увеличения масштаба.

Проблема, названная автором в качестве главной причины отказа от пиксельных media queries, просто не существует. Это просто легенда, которая слепо передается из уст в уста, регулярно попадает даже в публикации влиятельных изданий и блоги гуру фронтенда, и никто не удосуживается просто взять и проверить, а так ли это.
 

Во-вторых, если вы зададите media queries в em'ах, то значения breakpoint'ов будут зависеть от базового размера шрифта.

А теперь представьте такую ситуацию. Вот звонит вам далекий от IT шеф или клиент и говорит: «А чего у нас на сайте шрифт такой мелкий? Сделайте покрупнее». Спорить бесполезно. Вы грустно вдыхаете, бросаете виноватый взгляд на дверь кабинета UI-отдела, а потом открываете CSS и увеличиваете базовый размер шрифта с 12px до 16px (да, базовый размер шрифта все равно задается в пикселах, как ни крути).

Что при этом происходит? Все breakpoint'ы смещаются. Теперь на планшетах сайт отображается в одну колонку: так, как раньше выглядел только на телефоне. Выглядит это примерно так (сделайте ширину окна менее 900px). Вы этому рады? Готов спорить, что окажись вы в такой ситуации, вы будете судорожно переписывать свои media queries, и да поможет вам бох, если вы не использовали препроцессор.

Content first — это прекрасная идеология. Но не врите себе. Вы хотите строго определенную компоновку на определенных устройствах. Например, чтобы на iPad в портретном режиме колонка thumbnail'ов превращался в сетку из трех колонок, а в ландшафтном, скажем, чтобы сбоку появлялся сайдбар с навигацией. И вы не хотите, чтобы всё это поломалось при изменении размера шрифта.

Да, для контент-ориентированных сайтов ширина колонки текста не должна выходить за комфортные пределы. Но, во-первых, эта ширина имеет достаточно широкий диапазон. Мне известна рекомендация в 45—75 знаков, то есть ширина колонки может безболезненно меняться на величину вплоть до 66 процентных пунктов. Во-вторых, почему именно такая ширина считается стандартом? Откройте любой глянцевый журнал, там сплошь и рядом попадаются колонки текста шириной по 15 знаков, и никому не приходит в голову, что это плохо. Мне, например, очень удобно свернуть журнал трубочкой, когда я пытаюсь читать его в битком набитом вагоне метро.

 

В-третьих, использование em'ов для задания ширины media queries приводит к тому, что смежные media queries, например (max-width: 40em) и (min-width: 40em) отображаются внахлест. Величина перекрытия составляет всего один пиксел, но она есть. Если у посетителя сайта вдруг окажется именно такая ширина экрана, то и компоновка страницы, и оформление могут оказаться покорежены, вплоть до полной нечитаемости.

 

В-четвертых, min-width и max-width media queries всегда сравниваются с виртуальной шириной экрана, которая у любого браузера задана целым числом виртуальных пикселов, к примеру, для iPhone по четвертый включительно, она составляет 320×480, а для iPhone 5 — 320x533, если правильно помню. Задавая media queries в относительных величинах, вы сначала производите в уме преобразование из пикселов в em, а потом из em обратно в пикселы, чтобы понять, а в какую ширину экрана вы этим breakpoint'ом, собственно, попадаете.

Так зачем мучиться? Облегчите себе жизнь и ставьте breakpoint'ы в пикселах.

 

В общем, завязывайте, пожалуйста, с этой массовой истерией.

PS Я предполагаю, что единственная причина отказаться от пикселов для размера шрифтов — это возможность пропорционально менять размер шрифта всех текстов на сайте путем изменения одной величины. Но если вы используете препроцессор, то ничто не мешает делать это и с пиксельными значениями. Дискутировать на эту тему я не возьмусь, так как вопрос пикселов в размере шрифта я не прорабатывал.

PPS Если информация в этом комменте оказалась для вас полезной, плюсаните, пожалуйста, в карму. Мне ее слили за то, что я в посте про Nexus 5 я сравнил его с конкурентом, имеющим съемную батарею и слот для карты памяти. Теперь даже сабж плюсануть не могу. :(