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

Что такое адаптивная верстка?

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

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

С чего начать?

Качественная адаптивная верстка всегда впечатляет, но далеко не всегда является сложной в реализации. Все что Вам нужно, это: метатег viewport, масштабируемые единицы измерения и медиа-запросы.

Метатег viewport

Первым делом необходимо включить метатег viewport в head html-файла:

<meta name=”viewport” content=”width=device-width, initial-scale=1">

Данный тег содержит несколько атрибутов, определяющих, как бразуер будет масштабировать и выводить данные в область просмотра. width=device-width определяет ширину экрана равной параметрам устройства, `initial-scale=1 в данном случае устанавливает масштаб 1:1 - “не масштабировать”.

Существуют еще несколько атрибутов метатега viewport:

1. heignt - высота области просмотра, является необязательным, если указан атрибут width;
2. user-scalable - доступность изменения масштаба пользователем, по умолчанию имеет значение yes;
3. minimum-scale - минимальный масштаб области просмотра;
4. maximum-scale - максимальный масштаб области просмотра.

Подробно о метатеге viewport и его атрибутах можно прочитать здесь

Рекомендуется избегать атрибутов user-scalable, minimum-scale, maximum-scale, так как они оказывают отрицательное влияние на вывод контента

Масштабируемые единицы измерения

Для многих CSS атрибутов, например: height, width, padding, margin - значениями являются целые или вещественные числа с указанием определенных единиц измерения: px, %, em, rem. Адаптивная верстка предполагает отказ от фиксированных или, иными словами, немасштабируемых единиц измерения.

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

Рассмотрим пример: width: 300px позволит получить качественный вывод блока на настольном компьютере, но на мобильных устройствах картина будет совершенно иной: содержимое блока может быть обрезано, так же могут потребоваться дополнительные действия со стороны пользователя - горизонтальная прокрутка или масштабирование. Результат - негативное отношение к ресурсу и снижение конверсии. В то же время width: 100% приведет размер блока в соответствии с доступной шириной экрана и позволит избежать отрицательных последствий.

Медиа-запросы

Переходим к самой интересной части. Медиа-запросам CSS принадлежит ведущая роль в реализации идеи адаптивной верстки. Именно они определяют возможность использования различных стилей CSS для устройств с различными параметрами.

@media (some query) {
  css-selector {
    some-attribute: some-value
    ...
  }
}

Для запросов устанавливаются определенные условия. Чаще всего используются следующие:

1. min-width: правило для браузеров с шириной больше установленного значения,
2. max-width: правило для браузеров с шириной меньше установленного значения,
3. min-height: правило для браузеров с высотой больше установленного значения,
4. max-height: правило для браузеров с высотой меньше установленного значения.

C помощью and можно комбинировать правила для медиа-запросов. Например:

@media (min-width: 500px) and (max-width: 600px){
  .class-one {
    background-color: blue
  }
}

Это означает, что только на устройствах с шириной от 501px до 599px у элементов класса .class-one будет синий цвет фона.

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

Следует помнить, что использование медиа-запросов требует корректного определения точек изменения стилей CSS.

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

Тестирование

Инструменты разработчика Google Chrome отлично помогают при проверке адаптивной верстки. Вместо того чтобы постоянно изменять размеры браузера, достаточно нажать на иконку “Toggle Device Toolbar”. После этого верхняя панель позволит тестировать верстку для различных устройств.

Советы

1. Добавьте это в head вашего файла HTML: <meta name=”viewport” content=”width=device-width, initial-scale=1">;
2. Используйте масштабируемые единицы измерения, например % и auto
3. Изучите и используйте CSS Grid и Flexbox
4. Устанавливайте CSS свойства для устройств с различными параметрами с помощью @media
5. Тестируйте результаты своей работы с помощью Chrome Dev Tools

Спасибо за внимание