По мере того, как число пользователей мобильных телефонов в Интернете увеличивается, для веб-дизайнеров становится все более важным размещать контент так, чтобы он хорошо работал на экранах различных размеров. Адаптивный веб-дизайн, первоначально определенный Итаном Маркоттом в книге «A List Apart» , представляет собой стратегию дизайна, которая реагирует на потребности пользователей и возможности их устройств путем изменения макета сайта в соответствии с используемым устройством. Например, адаптивный сайт может отображать контент в виде одного столбца на телефоне, двух столбцов на планшете и трех или четырех столбцов на настольном компьютере.
Поскольку устройства с выходом в Интернет имеют очень много возможных размеров экрана, важно, чтобы ваш сайт адаптировался к любому существующему или будущему размеру экрана. Современный адаптивный дизайн также учитывает такие способы взаимодействия, как сенсорные экраны. Цель — оптимизировать опыт для всех.
Установите область просмотра
Страницы, оптимизированные для различных устройств, должны включать метатег области просмотра в заголовке документа. Этот тег сообщает браузеру, как управлять размерами и масштабированием страницы.
Чтобы обеспечить максимальное удобство, мобильные браузеры отображают страницу по ширине экрана настольного компьютера (обычно около 980px , хотя это зависит от устройства), а затем пытаются улучшить внешний вид контента, увеличивая размеры шрифта и масштабируя контент в соответствии с размером экрана. Это может привести к тому, что шрифты будут выглядеть непоследовательно, и пользователям придется увеличивать масштаб, чтобы увидеть контент и взаимодействовать с ним.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Использование мета-значения области просмотра width=device-width указывает странице соответствовать ширине экрана в аппаратно-независимых пикселях (DIP), стандартной единице визуального пикселя (которая может состоять из множества физических пикселей на экране с высокой плотностью). Это позволяет перекомпоновать содержимое страницы в соответствии с различными размерами экрана.
Некоторые браузеры сохраняют постоянную ширину страницы при повороте в альбомный режим и масштабируют ее до заполнения экрана вместо перекомпоновки. Добавление значения initial-scale=1 сообщает браузерам установить соотношение 1:1 между пикселями CSS и пикселями, независимыми от устройства, независимо от ориентации устройства, позволяя странице использовать всю ширину альбомной ориентации.
Аудит Lighthouse не имеет тега <meta name="viewport"> с width или initial-scale может помочь вам автоматизировать процесс проверки правильности использования метатега области просмотра в ваших HTML-документах.
Размер содержимого в области просмотра
Как на настольных, так и на мобильных устройствах пользователи привыкли прокручивать веб-сайты вертикально, а не горизонтально. Принуждение пользователя к горизонтальной прокрутке или уменьшению масштаба для просмотра всей страницы приводит к ухудшению пользовательского опыта.
При разработке мобильного сайта с мета-тегом области просмотра часто случайно создается содержимое страницы, которое не совсем помещается в указанную область просмотра. Например, изображение, отображаемое шире области просмотра, может вызвать горизонтальную прокрутку. Чтобы предотвратить это, настройте свой контент так, чтобы он помещался в области просмотра.
Контент имеет неправильный размер для области просмотра. Аудит Lighthouse может помочь вам автоматизировать процесс обнаружения переполненного контента.
Изображения
Изображение с фиксированными размерами вызывает прокрутку страницы, если оно больше области просмотра. Мы рекомендуем присвоить всем изображениям max-width 100% , что сжимает изображения в соответствии с доступным пространством, не позволяя им растягиваться за пределы исходного размера.
В большинстве случаев это можно сделать, добавив в таблицу стилей следующее:
img {
max-width: 100%;
display: block;
}
Добавьте размеры изображения в элемент img.
Даже если вы установили max-width: 100% , мы все равно рекомендуем добавлять атрибуты width и height в теги <img> , чтобы браузер мог зарезервировать место для изображений перед их загрузкой. Это помогает предотвратить сдвиги макета .
Макет
Поскольку размеры экрана и ширина в пикселях CSS сильно различаются между устройствами (например, между телефонами и планшетами и даже между разными телефонами), контент не должен зависеть от определенной ширины области просмотра для хорошей визуализации.
Раньше для этого требовалось задавать элементы макета в процентах. Использование пиксельных измерений требует от пользователя горизонтальной прокрутки на маленьких экранах:
Вместо этого использование процентов делает столбцы уже на меньших экранах, поскольку каждый столбец всегда занимает один и тот же процент ширины экрана:
Современные методы макетирования CSS, такие как Flexbox, Grid Layout и Multicol, значительно упрощают создание этих гибких сеток.
Флексбокс
Используйте Flexbox, если у вас есть набор элементов разного размера и вы хотите, чтобы они удобно размещались в ряд или несколько рядов, при этом более мелкие элементы занимали меньше места, а более крупные — больше.
.items {
display: flex;
justify-content: space-between;
}
Вы можете использовать Flexbox для отображения элементов в одну строку или в несколько строк по мере уменьшения доступного пространства.
CSS-сетка
CSS Grid Layout создает гибкие сетки. Вы можете улучшить предыдущий пример с плавающим размещением, используя макет сетки и единицу fr , которая представляет часть доступного пространства в контейнере.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Вы также можете использовать Grid Layout для создания обычных макетов сетки с максимально возможным количеством элементов. Количество доступных треков уменьшается по мере уменьшения размера экрана. В следующей демонстрации показана сетка, содержащая столько карточек, сколько помещается в каждой строке, с минимальным размером 200px .
Узнайте больше о CSS Grid Layout.
Многоколоночный макет
Для некоторых типов макета вы можете использовать макет с несколькими столбцами (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
Все эти функции имеют отличную поддержку браузера. Для получения более подробной информации, включая информацию о поддержке браузера, см. ширину , высоту , ориентацию и соотношение сторон на MDN.
Медиа-запросы на основе возможностей устройства
Учитывая разнообразие доступных устройств, разработчики не могут предполагать, что каждое большое устройство представляет собой обычный настольный компьютер или ноутбук или что каждое маленькое устройство использует сенсорный экран. Некоторые новые дополнения к спецификации медиа-запросов позволяют тестировать такие функции, как тип указателя, используемого для взаимодействия с устройством, и может ли пользователь удерживать указатель над элементами.
-
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 DevTools
После того как вы настроите точки останова медиа-запросов, проверьте, как они влияют на внешний вид вашего сайта. Вы можете изменить размер окна браузера, чтобы активировать точки останова, но Chrome DevTools имеет встроенную функцию, которая показывает, как страница выглядит при различных точках останова.
Чтобы просмотреть страницу с разными точками останова:
- Откройте Инструменты разработчика .
- Включите режим устройства . По умолчанию он открывается в адаптивном режиме .
- Чтобы просмотреть медиазапросы, откройте меню «Режим устройства» и выберите «Показать медиазапросы» . Точки останова будут показаны в виде цветных полос над страницей.
- Нажмите одну из полосок, чтобы просмотреть свою страницу, пока активен медиа-запрос. Щелкните правой кнопкой мыши панель, чтобы перейти к определению этого медиа-запроса.