По мере роста числа пользователей мобильных телефонов в интернете, для веб-дизайнеров становится все важнее размещать контент таким образом, чтобы он хорошо работал на экранах разных размеров. Адаптивный веб-дизайн, впервые описанный Итаном Маркоттом в книге «A List Apart» , — это стратегия проектирования, которая реагирует на потребности пользователей и возможности их устройств, изменяя макет сайта в соответствии с используемым устройством. Например, адаптивный сайт может отображать контент в одноколоночном режиме на телефоне, в двух колонках на планшете и в трех или четырех колонках на настольном компьютере.
Поскольку устройства с доступом в интернет имеют множество возможных размеров экрана, важно, чтобы ваш сайт адаптировался к любому существующему или будущему размеру экрана. Современный адаптивный дизайн также учитывает такие способы взаимодействия, как сенсорные экраны. Цель состоит в том, чтобы оптимизировать пользовательский опыт для всех.
Настройте область просмотра
Страницы, оптимизированные для различных устройств, должны содержать метатег viewport в заголовке документа. Этот тег указывает браузеру, как управлять размерами и масштабированием страницы.
Чтобы обеспечить наилучшее качество отображения, мобильные браузеры отображают страницу в соответствии с шириной экрана настольного компьютера (обычно около 980px , хотя это может варьироваться в зависимости от устройства), а затем пытаются улучшить внешний вид контента, увеличивая размер шрифта и масштабируя его под размер экрана. Это может привести к несоответствию шрифтов и потребовать от пользователей увеличения масштаба для просмотра и взаимодействия с контентом.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Использование метатега `viewport` со значением width=device-width указывает странице соответствовать ширине экрана в пикселях, не зависящих от устройства (DIP), — стандартной визуальной единице измерения пикселя (которая может состоять из множества физических пикселей на экране с высокой плотностью пикселей). Это позволяет странице перестраивать контент в соответствии с различными размерами экрана.
Некоторые браузеры сохраняют постоянную ширину страницы при повороте в альбомный режим и масштабируют её, чтобы заполнить весь экран, вместо переформатирования. Добавление значения initial-scale=1 указывает браузерам установить соотношение 1:1 между пикселями CSS и пикселями, не зависящими от устройства, независимо от ориентации устройства, позволяя странице использовать всю ширину альбомной ориентации.
Проверка отсутствия тега <meta name="viewport"> с width или initial-scale в Lighthouse поможет автоматизировать процесс проверки правильности использования метатега viewport в ваших HTML-документах.
Подгоните размер содержимого под размер области просмотра.
Как на настольных компьютерах, так и на мобильных устройствах пользователи привыкли прокручивать веб-сайты вертикально, а не горизонтально. Принуждение пользователя к горизонтальной прокрутке или уменьшению масштаба для просмотра всей страницы ухудшает пользовательский опыт.
При разработке мобильного сайта с метатегом viewport часто случайно создается контент страницы, который не совсем помещается в указанную область просмотра. Например, изображение, отображаемое шире, чем область просмотра, может вызвать горизонтальную прокрутку. Чтобы этого избежать, отрегулируйте контент так, чтобы он помещался в область просмотра.
Размер содержимого не соответствует размеру области просмотра. Аудит Lighthouse поможет автоматизировать процесс обнаружения содержимого, выходящего за пределы видимой области.
Изображения
Изображение с фиксированными размерами приводит к прокрутке страницы, если оно превышает размер области просмотра. Мы рекомендуем задавать для всех изображений max-width 100% , что позволяет уменьшить изображение до размера, занимаемого доступным пространством, и предотвратить его растяжение за пределы первоначального размера.
В большинстве случаев это можно сделать, добавив в таблицу стилей следующее:
img {
max-width: 100%;
display: block;
}
Добавьте размеры изображения к элементу img.
Даже если вы установите max-width: 100% , мы все равно рекомендуем добавить атрибуты width и height к вашим тегам <img> , чтобы браузер мог зарезервировать место для изображений до их загрузки. Это помогает предотвратить смещение макета .
Макет
Поскольку размеры экрана и ширина в пикселях CSS сильно различаются между устройствами (например, между телефонами и планшетами, и даже между разными телефонами), контент не должен зависеть от определенной ширины области просмотра для корректного отображения.
Раньше для этого требовалось задавать параметры элементов макета в процентах. Использование измерений в пикселях заставляет пользователя прокручивать страницу по горизонтали на маленьких экранах:
Использование процентов вместо процентов делает столбцы уже на маленьких экранах, поскольку каждый столбец всегда занимает один и тот же процент ширины экрана:
Современные методы компоновки CSS, такие как flexbox, grid layout и multicol, значительно упрощают создание таких гибких сеток.
Flexbox
Используйте Flexbox, если у вас есть набор предметов разных размеров, и вы хотите, чтобы они удобно размещались в ряд или несколько рядов, при этом мелкие предметы занимали меньше места, а крупные — больше.
.items {
display: flex;
justify-content: space-between;
}
С помощью Flexbox можно отображать элементы в один ряд или переносить их на несколько рядов по мере уменьшения доступного пространства.
CSS-сетка для разметки
CSS Grid Layout создает гибкие сетки. Вы можете улучшить приведенный ранее пример с плавающими сетками, используя `use grid layout` и единицу измерения fr , которая обозначает часть доступного пространства в контейнере.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Также можно использовать сетку для создания обычных макетов сетки с любым количеством элементов. Количество доступных дорожек уменьшается по мере уменьшения размера экрана. В следующем примере показана сетка, содержащая столько карточек, сколько помещается в каждой строке, с минимальным размером 200px .
Многоколоночная компоновка
Для некоторых типов компоновки можно использовать многоколоночную компоновку (Multicol), которая создает адаптивное количество колонок с помощью свойства column-width . В следующем примере страница добавляет колонки, когда есть место для еще одной колонки 200px .
Используйте медиа-запросы CSS для обеспечения адаптивности.
Иногда для поддержки определенных размеров экрана может потребоваться внести более существенные изменения в макет, чем это позволяют описанные ранее методы. Именно здесь на помощь приходят медиа-запросы.
Медиа-запросы — это простые фильтры, которые можно применять к стилям CSS, чтобы изменять эти стили в зависимости от типа устройства, отображающего контент. Они также могут изменять стиль в зависимости от характеристик устройства, включая ширину, высоту, ориентацию и то, используется ли устройство в качестве сенсорного экрана.
Для обеспечения различных стилей печати можно указать конкретный тип вывода и включить таблицу стилей для оформления печати:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
Также можно использовать медиа-запрос для включения стилей печати в основную таблицу стилей:
@media print {
/* print styles go here */
}
В адаптивном веб-дизайне наиболее часто запрашиваются данные о характеристиках устройств, что позволяет настраивать макет для сенсорных экранов или экранов меньшего размера.
Медиа-запросы, основанные на размере области просмотра.
Медиа-запросы позволяют создать адаптивный интерфейс, который применяет определенные стили к определенным размерам экрана. Запросы для определения размера экрана могут проверять следующие параметры:
-
width(min-width,max-width) -
height(min-height,max-height) -
orientation -
aspect-ratio
Запросы к медиаконтенту, основанные на возможностях устройства.
Учитывая разнообразие доступных устройств, разработчики не могут предполагать, что каждое крупное устройство — это обычный настольный или портативный компьютер, или что каждое маленькое устройство использует сенсорный экран. Некоторые новые дополнения к спецификации медиа-запросов позволяют проверять такие характеристики, как тип указателя, используемого для взаимодействия с устройством, и возможность удержания указателя над элементами пользователем.
-
hover -
pointer -
any-hover -
any-pointer
Попробуйте просмотреть эту демонстрацию на разных устройствах, например, на обычном настольном компьютере и на телефоне или планшете.
Эти новые функции хорошо поддерживаются во всех современных браузерах. Подробнее можно узнать на страницах MDN, посвященных функциям hover , any-hover , pointer и any-pointer .
Используйте any-hover и any-pointer
Функции any-hover и any-pointer проверяют, может ли пользователь удерживать указатель над элементами (часто это называется наведением курсора ) или использовать указатель вообще, даже если это не основной способ взаимодействия с устройством. Следует проявлять особую осторожность при их использовании, например, чтобы не заставлять пользователя сенсорного экрана переключаться на мышь. Однако any-hover и any-pointer могут быть полезны, если важно определить тип устройства пользователя. Например, ноутбук с сенсорным экраном и тачпадом должен соответствовать требованиям к грубому и точному управлению указателем, а также иметь возможность наводить курсор.
Как выбрать точки останова
Не устанавливайте точки останова на основе классов устройств, продуктов, названий брендов или операционных систем. Это затрудняет поддержку кода. Вместо этого позвольте содержимому определять, как изменяется его макет для соответствия контейнеру.
Начинайте с небольших пороговых значений и постепенно увеличивайте их. Определяйте основные точки перелома, постепенно наращивая их.
Сначала разработайте контент так, чтобы он помещался на экране небольшого размера, а затем расширяйте экран до тех пор, пока не потребуется точка останова. Это позволит минимизировать количество точек останова на вашей странице и оптимизировать их в зависимости от контента.
Следующий пример демонстрирует работу виджета прогноза погоды, представленного в начале этой страницы. Первый шаг — сделать так, чтобы прогноз хорошо отображался на маленьком экране:
Далее измените размер окна браузера до тех пор, пока между элементами не останется слишком много пустого пространства, чтобы виджет выглядел хорошо. Решение субъективно, но ширина более 600px , безусловно, слишком велика.
Чтобы установить точку останова на 600px , создайте два медиа-запроса в конце CSS для компонента: один для использования, когда ширина окна браузера составляет 600px или меньше, и один для использования, когда ширина окна превышает 600px .
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Наконец, переработайте CSS. Внутри медиа-запроса для max-width 600px добавьте CSS, предназначенный только для маленьких экранов. Внутри медиа-запроса для min-width 601px добавьте CSS для больших экранов.
При необходимости выбирайте небольшие точки останова.
Помимо выбора основных контрольных точек при значительных изменениях макета, полезно также корректировать незначительные изменения. Например, между основными контрольными точками может быть полезно отрегулировать поля или отступы элемента или увеличить размер шрифта, чтобы он выглядел более естественно в макете.
Этот пример следует той же схеме, что и предыдущий, начиная с оптимизации макетов для небольших экранов. Сначала увеличьте размер шрифта, когда ширина области просмотра превышает 360px . После этого, когда останется достаточно места, можно разделить максимальную и минимальную температуры так, чтобы они находились на одной строке, и увеличить размер значков погоды.
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
Для больших экранов мы рекомендуем ограничить максимальную ширину панели прогноза погоды, чтобы она не занимала всю ширину экрана.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Оптимизировать текст для чтения
Классическая теория читабельности предполагает, что идеальная колонка должна содержать от 70 до 80 символов в строке (примерно от 8 до 10 слов на английском языке). Рекомендуется добавлять точку останова каждый раз, когда ширина текстового блока превышает примерно 10 слов.
В этом примере шрифт Roboto размером 1em отображает 10 слов в строке на маленьком экране, но для больших экранов требуется точка останова. В этом случае, если ширина окна браузера превышает 575px , идеальная ширина контента составляет 550px .
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
Избегайте скрытия контента (:#avoid-hiding-content)
Будьте осторожны при выборе контента, который следует скрывать или показывать в зависимости от размера экрана. Не скрывайте контент только потому, что он не помещается на экране. Размер экрана не определяет, что именно пользователь захочет увидеть. Например, удаление информации о содержании пыльцы в прогнозе погоды может стать серьезной проблемой для людей, страдающих от весенней аллергии, которым эта информация необходима для принятия решения о возможности выхода на улицу.
Просмотр точек останова медиазапросов в инструментах разработчика Chrome.
После настройки контрольных точек для медиа-запросов проверьте, как они влияют на внешний вид вашего сайта. Вы можете изменить размер окна браузера, чтобы активировать контрольные точки, но в инструментах разработчика Chrome есть встроенная функция, которая показывает, как страница выглядит при разных контрольных точках.
Чтобы просмотреть вашу страницу при разных контрольных точках:
- Откройте инструменты разработчика .
- Включите режим устройства . По умолчанию он открывается в адаптивном режиме .
- Чтобы увидеть ваши медиа-запросы, откройте меню «Режим устройства» и выберите «Показать медиа-запросы» . Это отобразит ваши контрольные точки в виде цветных полос над страницей.
- Щелкните по одной из полос, чтобы просмотреть страницу, пока активен этот медиазапрос. Щелкните правой кнопкой мыши по полосе, чтобы перейти к определению этого медиазапроса.