Адаптивный дизайн — это подход к веб-дизайну, который позволяет страницам правильно отображаться на экранах всех размеров и разрешений, обеспечивая при этом удобство использования. Это способ проектирования для многоустройственного веба. В этой статье мы расскажем о некоторых техниках, которые помогут вам освоить этот подход.
Необходимые знания:
- Основы HTML (рекомендуется изучить «Введение в HTML»).
- Понимание работы CSS (изучите «Первые шаги в CSS» и «Основы CSS»).
Цель:
Понять основные задачи и возможности CSS, используемые для реализации адаптивного дизайна.
Предшественник адаптивного дизайна: мобильный веб-дизайн
До того как адаптивный веб-дизайн стал стандартом для создания сайтов, работающих на различных устройствах, разработчики говорили о мобильном веб-дизайне. Эти термины описывают схожие цели: обеспечение корректной работы сайтов на устройствах с разными физическими характеристиками (размер экрана, разрешение) с точки зрения макета, контента и производительности.
Раньше мобильные устройства имели слабые процессоры и ограниченную пропускную способность. Некоторые устройства не поддерживали CSS или даже HTML. Поэтому часто использовали серверные методы для определения типа устройства и браузера перед тем, как отправить подходящую версию сайта. Сегодня мобильные устройства способны обрабатывать те же технологии, что и настольные компьютеры, поэтому такие методы стали менее распространенными.
Тем не менее, важно использовать адаптивные техники для обеспечения подходящего опыта для мобильных пользователей, учитывая такие ограничения, как время работы от батареи и пропускная способность. Например, пользователь на мобильном устройстве может просто захотеть проверить время полета и информацию о задержках, а не видеть 3D-анимированную глобус с маршрутами полетов и историей компании.
Введение в адаптивный веб-дизайн
HTML изначально является адаптивным, или «жидким». Если создать веб-страницу только с использованием HTML и без CSS, браузер автоматически переформатирует текст под размер окна. Однако длинные строки текста на широком мониторе могут быть трудны для чтения, а сужение окна браузера или открытие сайта на мобильном устройстве может сделать сайт неудобным для использования.
Адаптивный веб-дизайн решает проблему разницы в размерах устройств, позволяя автоматически адаптировать контент к экрану, будь то планшет, телефон, телевизор или часы.
Адаптивный дизайн не является отдельной технологией — это подход. Это термин, описывающий набор лучших практик для создания макета, который может реагировать на любое устройство, используемое для просмотра контента.
Термин «адаптивный дизайн» был введен Итаном Маркоттом в 2010 году и описывал использование жидких сеток, жидких изображений и медиа-запросов для создания адаптивного контента.
Медиа-запросы
Медиа-запросы позволяют выполнять серию тестов (например, ширина экрана пользователя больше определенного значения) и применять CSS выборочно для стилизации страницы в соответствии с потребностями пользователя.
Например, следующий медиа-запрос проверяет, отображается ли текущая веб-страница как экранный медиа (а не печатный документ) и ширина вьюпорта составляет не менее 80rem. CSS для селектора .container будет применяться только при выполнении этих двух условий.
@media screen and (min-width: 80rem) {
.container {
margin: 1em 2em;
}
}
Вы можете добавлять несколько медиа-запросов в таблицу стилей, настраивая весь макет или его части для различных размеров экрана. Точки, в которых вводится медиа-запрос и изменяется макет, называются точками перелома.
Обычный подход при использовании медиа-запросов — создание простого одноколоночного макета для узких экранов (например, мобильных телефонов), а затем проверка наличия более широких экранов и реализация многоколоночного макета при достаточной ширине экрана. Проектирование с приоритетом для мобильных устройств называется mobile first дизайном.
Технологии для адаптивного макета
Адаптивные сайты строятся на гибких сетках, что означает отсутствие необходимости настраивать пиксельные макеты для всех возможных размеров устройств. Гибкая сетка позволяет изменять макет при необходимости, например, чтобы строки текста не становились слишком длинными или слишком узкими при изменении размеров экрана.
Несколько методов макета, включая многоколоночный макет, Flexbox и Grid, изначально адаптивны. Они предполагают создание гибкой сетки и предоставляют удобные способы для этого.
Многоколоночный макет
С помощью многоколоночного макета можно указать максимальное количество колонок, в которые нужно разбить контент. Размер колонок будет изменяться в зависимости от размера экрана.
.container {
column-count: 3;
}
Если указать ширину колонок, браузер создаст столько колонок, сколько поместится в контейнер, а оставшееся пространство будет равномерно распределено между всеми колонками.
.container {
column-width: 10em;
}
Flexbox
В Flexbox элементы изменяют размер, распределяя пространство в зависимости от размеров контейнера. Изменяя значения для flex-grow и flex-shrink, можно указать, как элементы должны вести себя при увеличении или уменьшении пространства вокруг них.
.container {
display: flex;
}
.item {
flex: 1;
}
CSS Grid
В CSS Grid Layout единица fr позволяет распределять доступное пространство между сеточными треками. Пример ниже создает контейнер сетки с тремя треками, каждый из которых занимает одну часть доступного пространства.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Адаптивные изображения и медиа
Чтобы гарантировать, что медиа не превышают размеры адаптивного контейнера, используйте следующий подход:
img,
picture,
video {
max-width: 100%;
}
Это позволяет масштабировать медиа, чтобы они не выходили за границы контейнера. Использование одного большого изображения и его масштабирование для малых устройств расходует пропускную способность, загружая изображения большего размера, чем необходимо.
Использование элемента <picture> и атрибутов <img> srcset и sizes позволяет предоставлять изображения, соответствующие вьюпорту пользователя и разрешению устройства.
Адаптивная типографика
Адаптивная типографика предполагает изменение размеров шрифтов в медиа-запросах или использование единиц измерения вьюпорта для отражения меньшего или большего количества экранного пространства.
Пример использования медиа-запросов для адаптивной типографики:
html {
font-size: 1em;
}
h1 {
font-size: 2rem;
}
@media (min-width: 1200px) {
h1 {
font-size: 4rem;
}
}
Использование единиц измерения вьюпорта для адаптивной типографики:
h1 {
font-size: 6vw;
}
Проблема использования vw в том, что пользователь теряет возможность увеличивать текст, так как он всегда зависит от размера вьюпорта. Решение заключается в использовании функции calc().
h1 {
font-size: calc(1.5rem + 3vw);
}
Мета-тег вьюпорта
Мета-тег вьюпорта:
<meta name="viewport" content="width=device-width,initial-scale=1" />
Этот мета-тег сообщает мобильным браузерам, что они должны установить ширину вьюпорта равной ширине устройства и масштабировать документ до 100% от его исходного размера.
Итог
Адаптивный дизайн — это подход к созданию сайтов и приложений, который учитывает окружение, в котором они просматриваются. Он включает в себя множество функций и техник CSS и HTML и стал стандартом при создании веб-сайтов.
