Мы освоили Flexbox, позиционирование и псевдоклассы. Теперь — адаптивная вёрстка (responsive design): подход, при котором страница корректно отображается на разных устройствах — компьютере, планшете, смартфоне. Мы используем медиа-запросы, гибкие единицы и viewport.
viewport и meta-тег.@media.%, vw, rem.В <head> обязательно:
<meta name="viewport" content="width=device-width, initial-scale=1">Без этого мобильный браузер масштабирует страницу под ширину экрана, и контент кажется мелким.
@media/* Стили по умолчанию — для мобильных */
@media (min-width: 768px) {
/* Планшет и больше */
.container { max-width: 720px; }
}
@media (min-width: 1024px) {
/* Десктоп */
.container { max-width: 960px; }
}Mobile-first: базовые стили для малых экранов, затем расширяем для больших.
max-width вместо min-widthИногда удобнее задавать стили для узких экранов:
@media (max-width: 767px) {
.nav { flex-direction: column; }
.card { width: 100%; }
}img {
max-width: 100%;
height: auto;
}Картинка не выходит за границы контейнера.
% — от родителяvw / vh — 1% ширины/высоты окнаrem — от корневого шрифта (обычно 16px)em — от шрифта родителя.container { width: 90%; max-width: 1200px; }
h1 { font-size: 2rem; }Добавь viewport в head. Проверь страницу в режиме мобильного в DevTools (F12 → Toggle device toolbar).
Три карточки в ряд на десктопе. На экране < 768px — в колонку, каждая на всю ширину.
Навигация: на десктопе — в ряд, на мобильном — вертикально (flex-direction: column).
Используй max-width: 100% для изображений. Проверь на узком экране.
Мы освоили viewport, медиа-запросы и гибкие изображения. На следующем уроке — практика вёрстки, затем проект «Лендинг».
<meta name="viewport" content="width=device-width, initial-scale=1"> — страница перестанет масштабироваться на мобильных устройствах.px вместо % или rem — на маленьких экранах вёрстка будет несуразной.min-width должен идти от меньшего к большему.Страница с контейнером. На мобильном (< 576px) — padding: 15px. На планшете (576–991px) — max-width: 540px, margin: auto. На десктопе (≥ 992px) — max-width: 960px.
6 карточек. На экране ≥ 768px — 2 в ряд, ≥ 1024px — 3 в ряд. Используй flex и media queries.
Навигация: на десктопе — пункты в ряд. На мобильном (< 768px) — скрой меню (display: none) и покажи кнопку «Меню» (пока без JS — просто разметка и стили).
Заголовки: на мобильном h1 — 24px, на десктопе — 36px. Используй медиа-запросы или clamp(): clamp(24px, 5vw, 36px).
Layout: слева sidebar 30%, справа main 70%. На мобильном — одна колонка, sidebar сверху. Flex или float.
Переведи фиксированные px на rem для шрифтов (1rem ≈ 16px). Контейнер — в % или max-width в vw.
Вернись к уроку «Мини-проект: Визитка». Сделай её адаптивной: на мобильном фото и текст в колонку, отступы меньше.