Чтобы сайт нормально выглядел на телефоне, добавьте viewport, начните стили с узкого экрана, используйте гибкие размеры и только затем расширяйте макет через media query. Ниже соберём адаптивную страницу без фреймворков: карточки будут перестраиваться, изображение не выйдет за контейнер, а кнопки останутся удобными для касания.
Адаптивность не означает «уменьшить десктопный сайт». На телефоне меняется доступная ширина, способ управления и порядок чтения. Рабочая стратегия называется mobile first: сначала делаем понятный одноколоночный интерфейс, затем добавляем правила для более широких экранов.
Viewport сообщает мобильному браузеру реальную ширину устройства.
Контейнеры, сетка и картинки могут сжиматься без горизонтальной прокрутки.
Media query включает колонки только тогда, когда для них достаточно места.
Почему обычный сайт ломается на телефоне
Чаще всего страницу растягивает один элемент с фиксированной шириной: контейнер width: 1200px, большая картинка, длинная строка или сетка из трёх несжимаемых колонок. Браузер честно сохраняет эти 1200 пикселей и предлагает прокрутить страницу вбок.
| Проблема | Хрупкое правило | Адаптивная замена |
|---|---|---|
| Контент шире экрана | width: 1200px | width: min(100% - 32px, 1120px) |
| Картинка растягивает карточку | Размер задан только в HTML | max-width: 100%; height: auto |
| Три колонки не помещаются | grid-template-columns: repeat(3, 1fr) | Одна колонка сначала, три после breakpoint |
| Текст слишком крупный или мелкий | Один размер для всех экранов | clamp() в разумном диапазоне |
Если страницу можно сдвинуть пальцем влево и увидеть пустое место, найдите элемент шире viewport. Масштабирование страницы жестом не считается исправлением.
В адаптивном варианте контент меняет структуру, а не просто становится мельче.
Минимальный HTML и тег viewport
Создайте рядом файлы index.html и style.css. Ключевая строка находится в head: width=device-width связывает ширину CSS-viewport с шириной устройства, а initial-scale=1 задаёт исходный масштаб. Без неё мобильный браузер может представить страницу как широкий десктопный лист.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Мой адаптивный проект</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="hero container">
<div>
<p class="eyebrow">Первый проект</p>
<h1>Страница, которой удобно пользоваться с телефона</h1>
<a class="button" href="#projects">Смотреть проекты</a>
</div>
<img src="workspace.jpg" alt="Ноутбук на рабочем столе">
</header>
<main id="projects" class="container">
<section class="cards">
<article class="card"><h2>Сайт-визитка</h2><p>Одна страница о вас.</p></article>
<article class="card"><h2>Портфолио</h2><p>Проекты и контакты.</p></article>
<article class="card"><h2>Блог</h2><p>Заметки об обучении.</p></article>
</section>
</main>
</body>
</html>style.css не даёт ошибку 404 в DevTools.Mobile-first CSS: сначала один столбец
Базовые правила ниже рассчитаны на узкий экран. У контейнера нет фиксированной ширины, у изображения есть предел, а карточки идут одной колонкой. box-sizing: border-box заставляет браузер включать padding и border в итоговый размер элемента.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
color: #18213d;
background: #f4f6ff;
}
img {
display: block;
max-width: 100%;
height: auto;
border-radius: 20px;
}
.container {
width: min(100% - 32px, 1120px);
margin-inline: auto;
}
.hero {
display: grid;
gap: 24px;
padding-block: 48px;
}
h1 {
font-size: clamp(2rem, 8vw, 4rem);
line-height: 1.05;
}
.button {
display: inline-flex;
min-height: 48px;
align-items: center;
padding: 0 20px;
border-radius: 12px;
color: white;
background: #4454e8;
}
.cards {
display: grid;
gap: 16px;
}
.card {
padding: 20px;
border-radius: 16px;
background: white;
}- Выражение
100% - 32pxоставляет по 16 пикселей воздуха с каждой стороны. - Функция
min()не даёт контейнеру стать шире 1120 пикселей на большом мониторе. - Функция
clamp()плавно меняет заголовок, но удерживает его между 2rem и 4rem. - Минимальная высота кнопки 48 пикселей сохраняет удобную область касания.
Базовый CSS работает везде, а дополнительные правила включаются при наличии свободного места.
Если свойства CSS пока приходится угадывать, закрепите селекторы, размеры и сетки в курсе CSS. Разметку для проекта можно повторить в курсе HTML и сразу смотреть результат в мобильном превью Кодика.
Media query: когда включать две и три колонки
Breakpoint выбирают по макету, а не по названию конкретного телефона. Медленно расширяйте окно: когда строка становится слишком длинной или карточкам тесно, там и нужен перелом. Для этого проекта первый breakpoint поставим на 700 пикселей, второй на 1000.
@media (min-width: 700px) {
.hero {
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
}
.cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1000px) {
.cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}- До 699 пикселей герой и карточки стоят в одну колонку.
- От 700 пикселей герой делится на текст и изображение, карточки становятся двухколоночными.
- От 1000 пикселей три карточки помещаются в один ряд.
minmax(0, 1fr)разрешает колонкам сжиматься и снижает риск переполнения длинным содержимым.
Количество колонок зависит от места для контента, а не от модели устройства.
Как проверить адаптивность и найти переполнение
Откройте DevTools, включите режим устройства и проверьте не одну любимую ширину, а диапазон примерно от 320 до 1440 пикселей. Потяните границу плавно: ошибки часто появляются между готовыми пресетами. Затем поверните экран и увеличьте масштаб текста до 200 процентов.
Не прячьте её через overflow-x: hidden. Найдите виновника: временно добавьте * { outline: 1px solid red; } и проверьте фиксированные width, gap и длинные строки.
Проверьте viewport, порядок правил и точную ширину. При mobile first используется min-width: широкие правила пишутся после базовых.
Разрешите контейнеру перенос: display: flex; flex-wrap: wrap; gap: 12px. Не уменьшайте текст до нечитаемого размера.
Как сделать сайт адаптивным под телефон?
Добавьте meta viewport, используйте гибкий контейнер и изображения, сначала опишите одноколоночный мобильный макет, затем расширьте его через @media (min-width: ...).
Какие размеры экрана брать для media query?
Выбирайте breakpoint по моменту, когда конкретному контенту становится тесно. Для старта часто хватает одного перелома около 700 пикселей и второго около 1000, но это не обязательные стандарты.
Почему width: 100% иногда всё равно растягивает страницу?
Ширину могут увеличивать padding при стандартном box model, фиксированная ширина дочернего элемента, min-width, длинный code или слишком большой gap.
Flexbox или Grid для адаптивного сайта?
Flexbox удобен для одной оси, например строки кнопок. Grid проще для сетки карточек и областей страницы. В одном проекте их нормально сочетать.
Можно ли сделать адаптив без media query?
Частично: гибкая сетка с auto-fit и minmax умеет перестраиваться сама. Но для заметной смены композиции, меню или порядка блоков media query обычно всё равно нужен.
Если стили не применяются, пройдите восемь проверок подключения CSS. Затем добавьте поведение по разбору подключения JavaScript к HTML и опубликуйте результат через GitHub Pages.
Понять роли всех слоёв поможет материал как HTML, CSS и JavaScript превращаются в сайт. В Кодике соберите тот же макет по шагам и проверяйте мобильное состояние после каждого изменения, а не в самом конце.