Как сделать разрешение сайта: адаптивный экран в 2026

У сайта нет одного правильного разрешения. Страница должна подстраиваться под ширину окна, масштаб текста и способ управления. Для этого задайте viewport, используйте гибкую сетку, ограничьте изображения и проверяйте содержимое на узком экране без горизонтальной прокрутки.

Разрешение экрана и ширина страницы не одно и то же

Физическое разрешение устройства измеряют аппаратными пикселями, а веб-макет строят в CSS-пикселях внутри viewport. Один и тот же телефон может иметь высокую плотность экрана, но показывать страницу в сравнительно узком viewport. Поэтому макет не следует привязывать к конкретной модели телефона или размеру картинки из паспорта устройства.

Практическое правило выбора: фиксируйте максимальную ширину только у читаемого контейнера, а внешнюю сетку делайте гибкой. Точку перестройки выбирайте там, где содержимое начинает ломаться, а не по названию устройства. web.dev рекомендует гибкую сетку и переходы, продиктованные содержимым, а также не запрещать пользователю масштабирование.

Если страница выглядит хорошо только на одном снимке экрана, это макет для снимка, а не адаптивный сайт. Проверяйте диапазон ширин и увеличение текста.

Добавьте корректный viewport

Без тега viewport мобильный браузер может отрисовать страницу как широкую настольную и затем уменьшить её. web.dev объясняет, что width=device-width связывает ширину страницы с шириной экрана в независимых от плотности пикселях.

<meta name="viewport" content="width=device-width, initial-scale=1">

Не добавляйте user-scalable=no и жёсткое maximum-scale=1. Они мешают людям увеличивать текст. Официальное руководство web.dev по доступному адаптивному дизайну прямо рекомендует сохранять возможность масштабирования.

Соберите гибкую основу вместо фиксированной ширины

Контейнеру удобно дать внутренние отступы, ширину до доступного места и разумный максимум. Карточки можно раскладывать Grid, а строки управления Flexbox. Проценты и функция min() помогают не выходить за viewport.

.page {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}
img, video {
  max-width: 100%;
  height: auto;
}

У такого каркаса есть безопасная граница: длинная таблица, схема или редактор могут требовать прокрутки внутри собственного блока. Не позволяйте одному широкому компоненту создавать горизонтальную прокрутку всей страницы. W3C поясняет, что обычное содержимое должно перестраиваться до эквивалента 320 CSS-пикселей без потери информации и прокрутки в двух направлениях; исключения допустимы для материалов, где двумерное расположение необходимо.

По теме: Как сделать на сайте список: HTML, CSS и доступность

Используйте медиазапрос только при реальной поломке

Сначала уменьшайте окно и смотрите, где меню, карточки или кнопки перестают помещаться. Поставьте breakpoint немного раньше этой точки. Не начинайте с набора популярных размеров устройств: они быстро меняются и не учитывают разделение окна или увеличение масштаба.

.toolbar {
  display: flex;
  gap: 12px;
}
@media (max-width: 48rem) {
  .toolbar {
    flex-direction: column;
  }
  .sidebar {
    order: 2;
  }
}

Проверяйте не только ширину. Кнопка должна оставаться доступной с клавиатуры, текст не должен перекрываться закреплённой панелью, а порядок блоков в HTML должен сохранять смысл после визуальной перестановки. Базовый путь от макета до готовой страницы описан в статье как сделать макет сайта.

Подготовьте изображения к разным экранам

Правило max-width: 100% не даёт изображению выйти из контейнера, но не решает вес файла. Для крупных изображений используйте srcset и sizes, чтобы браузер мог выбрать подходящий ресурс. MDN описывает варианты плотности и ширины для отзывчивых изображений.

<img
  src="cover-800.jpg"
  srcset="cover-480.jpg 480w, cover-800.jpg 800w, cover-1200.jpg 1200w"
  sizes="(max-width: 48rem) 100vw, 50vw"
  alt="Краткое описание изображения"
  width="800" height="533"
>

Отдельно проверяйте обрезку фоновых изображений: важный объект не должен исчезать при background-size: cover. Для галерей используйте рекомендации из гайда как сделать сайт с картинками.

По теме: Как сделать сайт на MacBook: локально и опубликовать в 2026

Проверьте результат диагностической последовательностью

Приёмка должна ловить не конкретное устройство, а тип поломки. Начните с самой узкой ширины, затем медленно расширяйте окно и отмечайте неожиданные скачки.

1. Откройте инструменты разработчика и задайте viewport шириной 320 CSS-пикселей.
2. Прокрутите страницу сверху вниз. Горизонтальной прокрутки у всей страницы быть не должно.
3. Увеличьте масштаб браузера до 200%, затем повторите навигацию с клавиатуры.
4. Проверьте промежуточные ширины между мобильным и настольным видом, а не только готовые шаблоны устройств.
5. Временно замените заголовки и ссылки более длинным текстом, чтобы увидеть переполнение.
6. Отключите загрузку одной картинки и включите эмуляцию медленной сети. Alt-текст и основной сценарий должны сохраняться.
7. Пройдите ключевое действие: отправьте тестовую форму, откройте меню и вернитесь назад.

• Белая полоса справа обычно указывает на элемент шире viewport.
• Мелкий текст на телефоне часто означает отсутствие или ошибку meta viewport.
• Прыжок макета при загрузке бывает из-за изображения без заданных width и height.
• Обрезанная кнопка указывает на фиксированную высоту, запрет переноса или неподходящий breakpoint.
• Длинный URL можно переносить с overflow-wrap: break-word; W3C показывает эту технику для сохранения reflow.

Когда адаптивный макет не решает задачу

Отдельная мобильная версия иногда нужна сложному приложению с принципиально другим сценарием, но для информационного сайта она обычно создаёт две версии контента и лишнюю поддержку. Адаптивность также не исправит тяжёлый JavaScript, маленькие области нажатия или запутанную навигацию. Их нужно проверять отдельно.

Не задавайте размер страницы по разрешению конкретного макета из графического редактора. Переносите из макета правила: максимум контейнера, расстояния, минимальные размеры компонентов и точки перестройки. Сборка сайта непосредственно на телефоне разобрана в материале как сделать сайт на Android.

Частые вопросы

Какое разрешение сайта поставить для компьютера?

Не ставьте одно разрешение. Ограничьте ширину читаемого контейнера, а фон и сетку оставьте гибкими. Проверяйте окно от узкого до широкого.

Достаточно ли проверить iPhone и Android?

Нет. Название устройства не покрывает разделённые окна, масштабирование и будущие размеры экранов. Проверяйте диапазон ширин и увеличение текста.

Почему сайт на телефоне выглядит очень мелким?

Сначала проверьте meta viewport. Затем ищите фиксированную широкую обёртку, которая заставляет браузер уменьшать содержимое.

Нужно ли писать много медиазапросов?

Нет. Гибкая сетка, auto-fit и относительные размеры снимают часть работы. Добавляйте breakpoint только там, где содержимое действительно ломается.