Зачем нужна адаптивная вёрстка
До сих пор создавали сайт для большого экрана. Открывали в браузере на компьютере, всё выглядело отлично. Но посмотрите вокруг. Люди заходят на сайты с телефонов, планшетов, маленьких ноутбуков. Экраны разные: 1920 пикселей, 1024, 768, 430. Если сайт сделан только для большого экрана, на телефоне он развалится. Текст мелкий, кнопки крошечные, элементы наезжают друг на друга.
Адаптивная вёрстка решает эту проблему. Сайт подстраивается под ширину экрана. На компьютере контент в три колонки, на планшете в две, на телефоне в одну. Шрифты становятся крупнее, кнопки больше, навигация прячется в меню. Один сайт работает на всех устройствах.
Посмотрите на сайт ADC на разных экранах. На десктопе ширина 1920 пикселей: крупный заголовок «ADC Community», картинка на всю ширину навигация сверху горизонтально. На планшете 1024 пикселя: заголовок чуть меньше, картинка адаптируется, контакты остаются в две колонки, всё читаемо. На телефоне 430 пикселей: картинка узкая, контакты в одну колонку, навигация превращается в иконку меню.
Медиазапросы — основа адаптации
Адаптация делается через media queries, медиазапросы. Это правила CSS, которые срабатывают при определённой ширине экрана. Пишете: «Если ширина меньше 1024 пикселей, уменьши шрифт заголовка». «Если ширина меньше 430 пикселей, расположи контакты в одну колонку». Браузер проверяет ширину и применяет нужные стили.
Откройте style.css. В конце файла добавьте медиазапрос для планшетов:
/* Адаптация для планшетов */
@media (max-width: 1024px) {
main {
width: 770px;
gap: 100px;
}
h2 {
font-size: 48px;
}
.main-picture {
max-width: 930px;
}
.contacts-grid {
width: 610px;
justify-content: space-between;
row-gap: 80px;
}
.card-wrapper {
gap: 40px;
}
.content-card-wrapper {
justify-content: start;
flex-direction: column;
gap: 24px;
}
.text-card-wrapper {
width: 100%;
gap: 16px;
}
}@media (max-width: 1024px) означает — «если ширина экрана 1024 пикселя или меньше». Внутри фигурных скобок пишете правила, которые перезаписывают основные стили. Заголовок h2 был 72 пикселя, становится 48. Сетка контактов уменьшает отступы.
Медиазапросы работают каскадом. Сначала применяются основные стили, потом медиазапросы для меньших экранов. Это как надевать одежду: сначала базовый слой, потом куртка, потом шапка. Каждый слой добавляет что-то новое.
Адаптация для мобильных устройств
Теперь адаптация для телефонов. Добавьте медиазапрос для 430 пикселей:
/* Адаптация для телефонов */
@media (max-width: 430px) {
main {
width: 392px;
gap: 64px;
}
h1 {
font-size: 64px;
}
h2 {
font-size: 32px;
}
h3 {
font-size: 24px;
}
.main-picture {
max-width: 392px;
}
.contacts-grid {
width: 100%;
flex-direction: column;
justify-content: start;
gap: 64px;
}
.card-wrapper {
gap: 32px;
}
.content-card-wrapper {
justify-content: start;
flex-direction: column;
gap: 24px;
}
.text-card-wrapper {
width: 100%;
gap: 24px;
}
}Обратите внимание: медиазапросы перезаписывают только те свойства, которые нужно изменить. Цвета, шрифты, остальное остаётся прежним. Не нужно дублировать весь CSS, только изменения.
Viewport и проверка адаптации
Проверьте адаптацию. Откройте сайт в браузере. Нажмите F12, откройте инструменты разработчика. Нажмите иконку устройств или Ctrl+Shift+M. Выберите разрешение: Desktop, Tablet, Mobile. Или введите точную ширину: 1920, 1024, 430.
Видите, как перестраивается страница? На 1024 заголовок меньше, отступы уже. На 430 контакты в столбик, навигация вертикально, текст крупнее. Это и есть адаптивная вёрстка.
Важный момент: viewport. Это мета-тег, который указывает мобильным браузерам, как отображать страницу. Без него телефон покажет десктопную версию в миниатюре. Откройте index.html, в <head> добавьте:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ADC</title>
</head>width=device-width устанавливает ширину страницы равной ширине устройства. initial-scale=1.0 устанавливает начальный масштаб. Без этого тега адаптация не заработает на реальных телефонах.
Адаптивная навигация с бургер-меню
Адаптация затрагивает все элементы. Навигация на телефоне часто прячется в бургер-меню. Три горизонтальные полоски, кликаете, меню выезжает сбоку. На десктопе навигация всегда видна, на телефоне скрыта для экономии места.
Создайте адаптивную навигацию:
<header class="header">
<div class="gradient-bg"></div>
<img src="logo.png" alt="Логотип ADC" class="logo">
<a href="history.html" class="desktop-nav">Наша история</a>
<a href="https://t.me/adchub" class="telegram-icon">
<img src="telegram.png" alt="Telegram ADC">
</a>
<!-- Кнопка бургер-меню, видна только на мобилке -->
<button class="menu-toggle" id="menuToggle">
<span></span>
<span></span>
<span></span>
</button>
<!-- Мобильное меню -->
<nav class="mobile-menu" id="mobileMenu">
<a href="history.html" class="menu-link">Наша история</a>
<a href="https://t.me/adchub" class="telegram-link-menu">
<img src="telegram.png" alt="Telegram ADC" class="telegram-picture">
</a>
<button class="menu-close" id="menuClose">
<img src="pictures/cancel.svg" alt="Меню" class="menu-close-picture">
</button>
</nav>
<div class="menu-overlay" id="menuOverlay"></div>
</header>Кнопка menu-toggle — это три полоски бургер-меню. В CSS скройте её на десктопе, покажите на телефоне:
.menu-toggle {
display: none;
flex-direction: column;
gap: 7px;
background: none;
border: none;
cursor: pointer;
}
.menu-toggle span {
width: 24px;
height: 3px;
background-color: #313131;
}
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
z-index: 999;
}
.menu-overlay.active {
opacity: 1;
visibility: visible;
}И стили для адаптива:
@media (max-width: 430px) {
.menu-toggle {
display: flex;
}
.main-nav {
display: none;
}
.main-nav.active {
display: flex;
flex-direction: column;
gap: 200px;
position: fixed;
top: 0;
left: 0;
padding: 48px 19px 32px 19px;
background: #FFF;
border-radius: 0 0 20px 20px;
}
.menu-link {
font-size: 24px;
}
.telegram-picture {
width: 48px;
}
.menu-close {
width: 32px;
height: 32px;
background: none;
border: none;
}
.menu-close-picture {
width: 14px
}
}На телефоне навигация скрыта display: none. Когда добавляется класс active, меню появляется справа. Это делается через JavaScript:
// Находим элементы
const menuToggle = document.getElementById("menuToggle");
const mobileMenu = document.getElementById("mobileMenu");
const menuClose = document.getElementById("menuClose");
const menuOverlay = document.getElementById("menuOverlay");
// Открытие меню при клике на бургер
menuToggle.addEventListener("click", function() {
mobileMenu.classList.add("active");
menuOverlay.classList.add("active");
document.body.style.overflow = "hidden"; // Блокируем прокрутку страницы
});
// Закрытие меню по кнопке с крестиком
menuClose.addEventListener("click", function() {
mobileMenu.classList.remove("active");
menuOverlay.classList.remove("active");
document.body.style.overflow = ""; // Возвращаем прокрутку
});
// Закрытие меню при клике на затемнённый фон
menuOverlay.addEventListener("click", function() {
mobileMenu.classList.remove("active");
menuOverlay.classList.remove("active");
document.body.style.overflow = "";
});classList.add('active') добавляет класс, classList.remove('active') убирает. Кликаете кнопку, меню выезжает. Кликаете ещё раз, прячется.
Основные принципы адаптивной вёрстки
Запомните главное. Адаптивная вёрстка делается через медиазапросы @media. max-width означает «ширина экрана или меньше». Viewport тег обязателен в <head>. Адаптация изменяет размеры шрифтов, количество колонок, раскладку элементов. Проверяйте адаптацию в инструментах разработчика на разных разрешениях.
В качестве домашнего задания адаптируйте страницу статьи.
Что означает медиазапрос @media (max-width: 768px)?
Зачем нужен мета-тег viewport?
Какие свойства часто изменяют в медиазапросах для мобильных устройств?
Адаптивная вёрстка на Дока — полное руководство