Адаптивный дизайн - подход, при котором один и тот же HTML и CSS сам подстраивается под любой экран, от телефона до огромного монитора, без создания отдельной версии страницы под каждое устройство. Раньше сайты делали под один размер экрана, и на других размерах вёрстка просто ломалась.
В этом уроке
Попробуй прямо сейчас: сам блокнот заметно уже desktop-монитора. Красный блок с фиксированной шириной 500px вылезает за край и создаёт горизонтальную прокрутку, а зелёный с шириной 100% всегда точно умещается по ширине контейнера - в этом и разница.
Проблема: один сайт - разные экраны
Пока у веба были только настольные мониторы, разработчики могли задавать элементам фиксированную ширину в пикселях - вроде 1200px - и не думать ни о чём другом. Но у смартфонов и планшетов ширина экрана может быть в разы меньше. Блок шириной 1200px просто не поместится на экране в 375px - появится горизонтальная прокрутка, часть текста и картинок будет обрезана по краю, а пользователю придётся постоянно скроллить в обе стороны.
.card { width: 100%; max-width: 1200px; } - блок тянется под экран, но не превышает разумный максимум на больших мониторах.
.card { width: 1200px; } - жёсткая ширина в пикселях: на экране уже 1200px обязательно появится горизонтальная прокрутка.
Три составляющие адаптивного дизайна
Термин "responsive web design" ввёл Итан Маркотт в 2010 году и сразу определил три составляющие, из которых он складывается: гибкие макеты - размеры и отступы в относительных единицах вместо фиксированных пикселей (о px, em и rem уже говорилось в отдельном уроке, дальше в этой группе к ним добавятся проценты и единицы viewport); гибкие изображения - картинки, которые не вылезают за пределы своего контейнера ни на каком экране; и медиа-запросы - разные наборы CSS-правил для разных размеров экрана в одном файле. Ни один из трёх приёмов сам по себе не решает задачу полностью - работают они только вместе.
width: 100%; max-width: 100%; у изображения - классический приём "гибкой картинки", не даёт ей вылезти за контейнер.
width: 800px; у изображения без ограничения по контейнеру - картинка вылезет за пределы блока на маленьком экране.
Почему это давно не опционально
Сегодня адаптивность - не эстетическое украшение, а обязательное требование. С 21 апреля 2015 года Google официально использует мобильную адаптацию страницы как фактор ранжирования в поисковой выдаче - в индустрии это обновление алгоритма называют "Mobilegeddon". Сайт без адаптивной вёрстки не просто выглядит неудобно на телефоне - он теряет позиции в поиске именно из-за этого.
адаптивная вёрстка + корректный метатег viewport - минимальный набор, который проверяет мобильная адаптация Google (подробнее про сам метатег - в следующем уроке).
"адаптивность добавим потом, если будет время" - частая ошибка на старте проекта: закладывать гибкие единицы и медиа-запросы сложнее, если верстать заново уже готовый жёсткий макет.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Думают, что адаптивность = просто уменьшить шрифт на телефоне | Макет всё равно ломается - одного изменения шрифта недостаточно | Использовать все три составляющие сразу: гибкие макеты, гибкие изображения и медиа-запросы |
| Забывают метатег viewport в head | Мобильный браузер отрисовывает страницу в масштабе десктопа и затем уменьшает её целиком | Добавить метатег viewport (разбор - в следующем уроке группы) |
| Задают элементам фиксированную ширину в пикселях | На узких экранах появляется горизонтальная прокрутка | Использовать проценты, vw/vh, max-width вместо жёсткого px |
| Считают адаптивность необязательной "фишкой на будущее" | С 2015 года это фактор ранжирования Google, а не просто украшение | Закладывать адаптивность с самого начала проекта, а не переделывать потом |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Три составляющие адаптивного дизайна | гибкие макеты + гибкие изображения + медиа-запросы |
| Кто ввёл термин "responsive web design" | Итан Маркотт, 2010 год |
| Единицы вместо жёстких px | %, vw, vh, em, rem (подробно - в следующих уроках) |
| С какого года это фактор ранжирования Google | с 21 апреля 2015 года (обновление Mobilegeddon) |
| Гибкая картинка | width: 100%; max-width: 100%; |
Коротко: отвечаем на вопросы
Чем адаптивный дизайн отличается от респонсивного?
В строгом смысле "адаптивный" - это несколько заранее готовых макетов под типичные размеры экрана, а "респонсивный" - один полностью гибкий макет, который тянется под любой экран. На практике и в этом курсе оба приёма используются вместе (гибкие единицы плюс медиа-запросы), и именно такую комбинацию сегодня обычно и называют просто "адаптивным дизайном".
Чем адаптивный дизайн отличается от отдельной мобильной версии сайта?
Отдельная мобильная версия (например, m.site.ru) - это полностью другой сайт со своим адресом, кодом и часто другой функциональностью. Адаптивный дизайн - это один и тот же HTML и CSS, который сам перестраивается под экран без создания второй копии сайта.
Обязательно ли делать сайт адаптивным?
На практике - да. Большая часть трафика сегодня приходит с мобильных устройств, а с 21 апреля 2015 года Google официально учитывает мобильную адаптацию как фактор ранжирования в поиске (обновление, которое в индустрии называют Mobilegeddon).
