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

Содержание

Вступление

В статье я собрал советы по использованию media query. Расскажу как можно более эффективно использовать media query. В конце статьи есть список использованных источников.

Внешнее подключение media query
Больше чем просто размер viewport
Не только смартфоны
Инструмент для работы с media query
Выделяйте специфичное
Breakpoints когда и сколько?
Второстепенные breakpoints
Относительные единицы измерения
Условная загрузка
Список использованных ресурсов

Внешнее подключение media query

< link href="test.css" rel="stylesheet" media="only screen and (max-width:480px)" />

Браузеры, которые не поддерживают media query не будут загружать эти стили, но браузеры с поддержкой будут загружать все независимо от того необходимы они или нет.

Но все же есть одна особенность – браузер не загружает фоновые изображения, определенные в стилях которые в данный момент не используются.

< link href="css/test1.css" rel="stylesheet" media="only screen and (max-width:480px)" />
< link href="css/test2.css" rel="stylesheet" media="only screen and (min-width:480px)" />

test1.css

body {
  background: url("../img/bg1.png");
}

test2.css

body{
  background: url("../img/bg2.png");
}

В зависимости от размера экрана будет загружена одна фоновая картинка.

Больше чем просто размер viewport

Ширина viewport это не единственное что можно определить с помощью media query. Есть много других функций которые можно определить, в том числе: пропорции устройства, ориентацию, разрешение, плотность пикселей и более.

Многие из них очень полезны:

— pixel-density пригодится если вы хотите использовать фоновые картинки и иконки адаптированные для экранов с высокой плотностью пикселей.

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

— height доступная высота, можно использовать для оптимизации что бы контент отображался полностью без разрывов в одном экране.

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

Не только смартфоны

Вы замечали насколько некрасиво смотрятся некоторые сайты на современных больших мониторах? Первая ассоциация связанная с media query — это создание интерфейса только для смартфонов. Сочетание media query и multi column поможет отобразить ваш сайт красиво на больших мониторах.

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

@media all and (min-width: 1300px) {
     /* ... */
}

Инструмент для работы с media query

Существует множество плагинов для браузеров которые помогают разрабатывать адаптивный дизайн, но по моему опыту лучшим инструментом является Responsive Mode который был добавлен с 15 версией Firefox.

Выделяйте специфичное

Отсутствие media query, на самом деле и есть media query. Этот совет часть стратегии mobile-first, согласно которой. Вместо:

/* Desktop-first */
.column {
    float: left;
    width: 30%;
}

@media all and (max-width: 40em) {
    .column {
        float: none;
        width: auto;
    }
}

Лучше определить только специфичные, правила только там, где это необходимо:

/* Mobile-first  */
@media all and (min-width: 40em) {
    .column {
        float: left;
        width: 30%;
    }
}

В результате у нас получился простой и легкий в поддерживании код. Также, такой код более подходит для старых мобильных браузеров которые не поддерживают media query.

Breakpoints когда и сколько?

Так исторически сложилось что – breakpoints были привязаны к размерам популярных устройств. (iPhone = 320px портрет, 480px = iPhone пейзаж, и т.д. ). Но что мы видим сейчас размеры устройств постоянно меняются, появляется все больше устройств с нестандартными размерами. Какой он стандарт? Веб постоянно развивается, так что это наша работа, создавать интерфейсы, которые выглядят и работают прекрасно на любом экране.

Так где же расставить breakpoints и сколько их необходимо?

Позвольте контенту определить когда ставить breakpoint и сколько необходимо. Начните с маленького экрана, а затем расширяйте, пока не увидите что пора выставить breakpoint. Определяйте breakpoints под ваш дизайн, а не под конкретное устройство.

Второстепенные breakpoints

Иногда так случается, что не все элементы дизайна вписываются в определенные breakpoints. То есть происходят слишком глобальные изменения и тут есть два выхода: первый, не очень желательный, менять уже определенные breakpoints или менять дизайн и второй, более прагматичный, определить второстепенные breakpoints в границах глобального breakpoint.

С одной стороны, это усложняет стили, но никто не говорит, что бы вы использовали второстепенные breakpoints для всех элементов. Используйте только там, где вам не хватает гибкости.

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

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

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

Условная загрузка — очень мощный инструмент. Который позволяет выставить приоритеты для контента, повысить производительность. Суть этого приема заключается в том что клиент сам решает какой контент, загружать и в каком приоритете. Допустим вы загружаете картинки асинхронно, с помощью javascript, и вы используете адаптированные картинки для разных размеров экранов. Вопрос как javascript может узнать, какой именно контент, необходимо загружать в данный момент?

Для этого мы можем использовать matchMedia. matchMedia позволяет нашему javascript определить все свойства доступные через media query.

Выглядит это примерно так:

if (window.matchMedia("(min-width: 60em)").matches) {
    /* load something */
}

Альтернативная методика, тоже заслуживает изучения.