Отзывчивый дизайн и медиа-выражения

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

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

Существует два подхода к вёрстке: desktop-first и mobile-first. Когда мы говорим о desktop-first, это означает, что сайт изначально проектируется под большой экран, а далее видоизменяется к меньшим разрешениям, подключая дополнительные правила. При использовании подхода mobile-first, сайт проектируется под экраны мобильных телефонов, а затем, если разрешение экрана позволяет, подключает дополнительные правила расположения блоков на странице, чтобы сайт перестраивался под большие экраны. Общепринятым стандартом является использование подхода mobile-first. Дело в том, что мобильные устройства считаются более слабыми, поэтому мы можем сэкономить их вычислительный ресурс, не давая включать правила для больших экранов. Пойдём от обратного. Представим, что мы используем подход desktop-first. Тогда, при открытии сайта с телефона, браузер сначала рассчитает все правила для больших экранов, затем поймет, что разрешение экрана маленькое и включит еще слой дополнительных правил. Именно в этом месте у нас и произойдет экономия. Пусть устройства с большими экранами подключают дополнительные правила, ведь почти всегда эти устройства имеют большую вычислительную мощность.

Для задания правила используется ключевое слово @media, где указывается, например, минимальная (для подхода mobile-first) ширина экрана.

Рассмотрим пример:

@media(min-width: 720px) {
  ...
}

Здесь мы видим, что если разрешение экрана больше 720 точек, мы включим дополнительные CSS-правила, позволяющие иначе расположить блоки на странице. Внутри фигурных скобок мы можем писать обычный CSS-код.

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

Используем подход mobile-first. Опишем изначальный HTML:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

И CSS:

ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: block;
  width: 100%;
  float: left;
}

Теперь сделаем так, чтобы на планшетах в одной строке было два блока. Сделаем предположение, что планшеты - это устройства с экранами более 720 точек в ширину.

@media(min-width: 720px) {
  li {
    width: 50%;
  }
}

И сделаем ещё одно правило для крупных устройств:

@media(min-width: 1200px) {
  li {
    width: 33%;
  }
}

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