Адаптивный дизайн на CSS
Flex Responsive и Grid Responsive показали приёмы вёрстки на breakpoints. Адаптивный дизайн — это общая картина: один сайт читается на телефоне, планшете и широком мониторе — без двух копий HTML. Урок задаёт привычки; media queries, breakpoints и адаптивные изображения углубят позже.
Набор инструментов адаптивного дизайна
📊 Адаптивный дизайн кратко
| Элемент | Повседневная задача |
|---|---|
| Viewport meta | Говорит мобильному браузеру брать ширину устройства, а не «desktop-колонку» |
| Fluid-контейнер | width: 100% + max-width + боковые отступы — удобная длина строки |
Относительные единицы (rem, %, em) |
Типографика и отступы масштабируются с настройками |
| Гибкие изображения | max-width: 100%, чтобы медиа не вылезали на узком экране |
| Одно HTML-дерево | Те же landmarks; CSS переносит смену layout |
| Media queries (следующий урок) | Менять правила при совпадении viewport |
Страницы с фиксированной шириной, которые на телефоне зумятся или скроллятся по горизонали, раздражают. Адаптивный дизайн принимает любую ширину и спокойно подстраивает отступы, колонки и шрифт — с Flex и Grid, которые вы уже отрабатывали.
Viewport meta — мобильному нужна подсказка
Без <meta name="viewport" content="width=device-width, initial-scale=1"> многие телефоны рисуют canvas шириной desktop и уменьшают. Один раз в <head>, затем CSS.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
Mobile-first vs desktop-first
Mobile-first пишет базу для узких экранов, затем запросы min-width для больших. Desktop-first начинает широко и сжимает через max-width — как в Flex/Grid Responsive. Оба подхода OK, если менять один слой за раз; выберите привычку на проект.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
font-size: 1rem;
padding: 1rem;
}
/* Урок Media Queries добавит правила min-width здесь */
Fluid-контейнер по центру
Полная ширина с потолком max-width и горизонтальным padding — контент не упирается в край. Работает до выбора Flex или Grid для колонок.
.page-wrap {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Относительные единицы для текста и отступов
rem привязан к корневому размеру — удобно для заголовков и gap. % для ширины внутри родителя. Не фиксируйте всё в px, когда относительная шкала держит страницу спокойной при zoom.
:root {
font-size: 100%;
}
h1 {
font-size: 1.75rem;
margin: 0 0 0.75rem;
}
.lead {
font-size: 1.125rem;
max-width: 40rem;
}
Гибкие изображения и медиа
Картинки шире viewport дают горизонтальный scroll. Простая защита: display: block, max-width: 100%, height: auto.
img,
video {
display: block;
max-width: 100%;
height: auto;
}
Спокойная адаптивная привычка
Одно HTML-дерево. Viewport meta на месте. Сначала fluid-контейнер и относительные единицы. Flex/Grid Responsive, когда колонки должны reflow — не второй сайт «только mobile». Запишите план breakpoints; Media Queries назовёт синтаксис.
Попробуйте сами
- Проверьте viewport meta на примере страницы.
- Оберните контент в fluid-контейнер с
max-widthи padding. - Текст в
remи проверьте zoom браузера. - Правило гибких изображений на галерее.
- Layout, которому ещё нужна media query — отложите на следующий урок.
Частые ошибки
- Фиксированная px-ширина на каждом wrapper
- Отдельный m.example.com вместо адаптивного CSS на одном дереве
- Забытый viewport meta и «отдалённый» вид на mobile
- Огромные картинки без
max-width: 100% - Думать, что этот intro заменяет media queries, breakpoints и адаптивные изображения
Итог
- Адаптивный дизайн подстраивает одно HTML под разные viewport
- Viewport meta + fluid-контейнер + относительные единицы — фундамент
- Mobile-first и desktop-first — старт; media queries применяют сдвиги
- Flex/Grid Responsive — инструменты в этой логике
- Дальше: Media Queries
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху