Почему сайт должен нормально выглядеть на телефоне
Открой любой сайт на телефоне. Если текст читаемый, кнопки нажимаются пальцем и не нужно тянуть страницу вбок — перед тобой адаптивная верстка.
Если нет — это сайт из 2009 года, который никто не трогал.
По данным на 2025 год, 64% всего мирового веб-трафика идёт с мобильных устройств. Больше половины твоих посетителей смотрят сайт с телефона. И Google при ранжировании первым делом смотрит именно на мобильную версию — это называется mobile-first indexing.
Адаптивная верстка сегодня — не опция, а базовое требование к любому сайту.
Что такое адаптивный дизайн простыми словами
Представь воду. В стакане — принимает форму стакана. В бутылке — форму бутылки. Содержимое одно, форма разная.
Адаптивный сайт работает так же. Один код, один набор страниц — но на экране 1440px он выглядит как полноценный десктопный макет с колонками. На экране 375px — как мобильный интерфейс, где всё выстроено в одну колонку и кнопки достаточно крупные для пальца.
Три инструмента, на которых всё держится:
Гибкая сетка — размеры блоков задаются в процентах или долях, а не в пикселях. Блок не 800px — а 50% от ширины экрана.
Гибкие изображения — картинки меняют размер пропорционально контейнеру. Одна строчка CSS: max-width: 100%.
Медиазапросы — CSS-инструкции, которые включают разные стили при разных размерах экрана.
Одна строчка без которой адаптивность не работает
Прежде чем делать что-либо — в <head> каждой страницы должна стоять эта строка:
Без неё мобильный браузер отображает сайт как уменьшенную копию десктопного. Все медиазапросы будут написаны, но браузер их проигнорирует.
width=device-width говорит браузеру: приравняй ширину рабочей области к ширине экрана устройства. initial-scale=1 — без принудительного масштабирования.
Это первое, что нужно проверить, если адаптивность не работает.
Как работают медиазапросы CSS
Медиазапрос — это условие. «Если ширина экрана меньше 600px — применить вот эти стили».
Читается буквально: «если ширина экрана меньше или равна 600 пикселям — одна колонка вместо трёх».
Точки, при которых меняется макет — называются брейкпоинты. Стандартный набор в 2026 году:
- до 480px — смартфоны
- 768px — планшеты
- 1280px — ноутбуки
- 1440px+ — десктопы и мониторы
Главное правило: брейкпоинты должны определяться контентом, а не конкретными моделями устройств. Если макет «ломается» при определённой ширине — вот твой брейкпоинт.
Подход Mobile First — почему начинают с телефона
Есть два способа писать медиазапросы.
Desktop first — сначала пишешь для большого экрана, потом «ужимаешь» для маленького через max-width.
Mobile first — сначала пишешь для телефона, потом «расширяешь» для большого через min-width.
Mobile first — правильный подход по двум причинам. Во-первых, маленький экран принудительно заставляет оставить только самое важное. Во-вторых, браузер загружает базовые стили быстрее — сложность нарастает постепенно, а не урезается.
Адаптивная сетка на Flexbox и Grid
Два главных инструмента для адаптивных раскладок — Flexbox и CSS Grid.
Flexbox хорош для одномерных задач: ряд карточек, шапка с меню, список элементов.
Grid — для двумерных: макет страницы целиком, галерея в несколько рядов.
Один из лучших адаптивных трюков — сетка без медиазапросов:
auto-fit и minmax делают так: карточки занимают минимум 300px, но если места хватает — растягиваются равномерно. На широком экране четыре в ряд. На телефоне — одна. Без единого медиазапроса.
Адаптивная типографика через clamp
Раньше размеры шрифтов меняли через брейкпоинты: 16px на мобильном, 20px на десктопе. Это создаёт резкие переходы.
Современный способ — функция clamp():
Размер будет не меньше 1.5rem и не больше 3rem. Между ними — плавно масштабируется с шириной экрана. Без брейкпоинтов, без скачков.
И ещё важное: всегда используй rem и em вместо px для текста. Если пользователь увеличил шрифт в настройках браузера — rem учтёт это, px — нет.
Адаптивные изображения что это и зачем нужно
Загрузить огромную картинку 2400px на телефон с экраном 390px — значит тратить трафик пользователя впустую и замедлять сайт.
Решение — атрибут srcset:
Браузер сам выбирает нужный размер изображения под конкретный экран и плотность пикселей. На телефоне — лёгкая версия, на Retina-дисплее MacBook — детализированная.
Типичные ошибки адаптивной верстки у новичков
Нет viewport meta тега. Все медиазапросы написаны, но ничего не работает. Проверь <head> первым делом.
Фиксированные пиксели везде. Блок width: 800px на телефоне с экраном 390px вылезет за край.
Горизонтальная прокрутка. Почти всегда причина — width: 100vw вместе с padding, или элемент с фиксированной шириной шире экрана.
Маленькие кнопки. На мобильном кнопка должна быть минимум 44×44px — иначе промахиваешься пальцем.
Lazy loading на главном изображении. Если поставить loading="lazy" на главный баннер страницы — он загрузится позже, и метрика скорости ухудшится.
Как проверить адаптивность сайта
Самый быстрый способ — DevTools в браузере. В Chrome: F12 → иконка телефона в верхнем левом углу (или Ctrl+Shift+M).
Откроется режим просмотра с разными размерами экрана. Можно выбрать iPhone, Samsung, iPad или просто тянуть за край и смотреть как меняется макет.
Для проверки скорости — Google PageSpeed Insights покажет Core Web Vitals: три метрики, по которым Google оценивает сайт при ранжировании.
Чеклист адаптивного сайта — проверь перед публикацией
- Viewport meta тег прописан в <head>
- Размеры блоков в %, vw, fr или rem, не в px
- Медиазапросы написаны по принципу mobile-first
- Изображения используют srcset или max-width: 100%
- Текст в rem или em, не в px
- Кнопки не меньше 44×44px на мобильном
- Нет горизонтальной прокрутки на телефоне
- Проверено в DevTools на разных размерах экрана
Адаптивность — это не отдельная тема, это часть вёрстки с первого дня. Начни делать сайты сразу под все экраны, и это станет привычкой, а не дополнительной задачей.
Разбираем адаптивность на практике в бесплатном учебнике
Вопросы — в чате