Адаптивная верстка, часть 2: медиавыражения и подходы к адаптивной верстке

Для начала в <head></head> вставим мета-тег
<meta name=”viewport” content=”width=device-width, initial-scale=1">
тем самым мы говорим браузеру, что ширина области просмотра ровна ширине экрана устройства.

Принципы перестройки сетки:

  • Когда сетка перестает удовлетворять размерам экрана, ее меняют с помощью медиавыражений;
  • Широкий экран — сложная сетка, много колонок; чем уже экран, тем проще сетка.
  • Учитывать, что html-разметка остается той же и нужно предусмотреть, чтобы для меньших экранов сетка перестраивалась как задумано только за счет стилей.

Основные брекпоинты или контрольные точки следующие:
max-width: 320px
max-width: 480px
max-width: 768px
max-width: 960px
max-width: 1200px
min-width: 1200px

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

Синтаксис медиавыражений

/* Стили для десктопа */
стили по умолчанию (т.е. даже если браузер не поддерживает медиазапросы — стили будут подгружаться).

@media(max-width: 960px) {
/* Стили для планшета в горизонтальном положении */
}
для разрешений от 769 до 960px.

@media(max-width: 768px) {
/* Стили для планшета в вертикальном положении */
}
для разрешений от 481 до 768px.

@media(max-width: 480px) {
/* Стили для телефона */
}
все экраны с разрешением 480px и меньше идут с этими стилями.

А что с поддержкой? Замечательно поддерживаются, кроме недобраузера IE8, но для него есть полифилы respond.js и css3-mediaqueries-js.

Подходы к созданию адаптивных сеток

От простой сетки к сложной

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

/* Стили для телефона */

@media(min-width: 480px) and (max-width: 768px) {
}

@media(min-width: 768px) and (max-width: 1200px) {
}

@media(min-width: 1200px) {
}

От сложной сетки к простой

В этом подходе по мере срабатывания медиавыражений постепенно отсекаются лишние свойства и прячутся элементы.
Если честно, этот подход привычнее: определить все элементы сразу и убирать по мере необходимости.

/* Стили для десктопа */

@media(max-width: 960px) {
}

@media(max-width: 768px) {
}

@media(max-width: 480px) {
}

Mobile first

Основные составляющие этого подхода:

  • Принцип от простой сетки к сложной
  • Отсекается всё лишнее
  • Детали для планшетных и десктопных версий спрятаны
  • Увеличенные элементы управления
  • Измененное положение элементов управления
  • Забота о лёгкой графике, быстрой загрузке и производительности.

В следующих статьях продолжим тему адаптивности.