Адаптивный дизайн: размеры экранов, сетки и правила

Если вы когда-либо пытались “просто уменьшить десктопный макет под мобильный”, вы уже знаете — это не работает. Интерфейс ломается, текст становится нечитаемым, а кнопки — неудобными.

Проблема в том, что адаптивный дизайн — это не про “подогнать под айфон”. Это про систему: размеры экранов, сетку, поведение контента и реальные сценарии использования.

В этой статье — конкретные параметры и правила, которые используют дизайнеры и разработчики.

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

Адаптив строится не под устройства, а под диапазоны ширин. Это ключевой сдвиг, который отличает современный подход от устаревшего “320 / 768 / 1024 / 1440”.

Что такое ширина экрана, viewport и рабочая область

В веб-дизайне важна не физическая матрица устройства, а viewport — область, в которой браузер отображает сайт.

• Физическое разрешение — реальные пиксели дисплея
• CSS-пиксели — логическая единица интерфейса
• Viewport — доступная область под контент

Например: экран 1170×2532 (iPhone) отображает сайт примерно как 390 px ширины.

👉 Поэтому ориентироваться нужно именно на viewport, а не на “размеры айфона”.

Популярные диапазоны ширин для мобильных, планшетов и десктопов

Важно: это не “точки”, а диапазоны. Интерфейс должен корректно выглядеть между ними.

Почему нельзя проектировать только под “стандартные” разрешения

• Устройства с одинаковым разрешением ведут себя по-разному
• Пользователь может менять масштаб
• Окно браузера не всегда на весь экран

Главный принцип: breakpoint появляется там, где ломается интерфейс.

Разрешения экранов и их роль в адаптивном дизайне

Разрешение — это не то, с чем вы работаете при построении макета. Это важно для качества, но не для layout.

Чем разрешение отличается от CSS-ширины

Разрешение = физические пиксели.
CSS-ширина = логическая ширина интерфейса.

Пример: экран 1920×1080 может отображать сайт как 960 px или 1280 px — в зависимости от DPR.

Retina, DPR и плотность пикселей

• DPR = device pixel ratio
• Retina = высокая плотность пикселей

Если DPR = 2, то 1 CSS px = 2×2 физических пикселя.

👉 Именно поэтому картинки “мылит”, если они не подготовлены под high DPI.

Почему ориентироваться нужно не только на px устройства

Практика:

• layout строится на CSS px
• изображения — в 2x / 3x
• иконки — SVG

Хороший пример — использование формата WebP, который снижает вес без потери качества.

Вывод: ширина управляет структурой, плотность — качеством.

Сетка в адаптивном дизайне

Сетка — это инструмент контроля. Без неё адаптив превращается в хаос.

Колонки, gutters, margins

• Колонки — основа структуры
• Gutters — расстояние между колонками
• Margins — внешние поля

Типичные значения:

• Desktop: 12 колонок, gutter 24px
• Tablet: 8 колонок
• Mobile: 4 или 1 колонка

Как меняется сетка на мобильных, планшетах и десктопах

Пример: карточки товара → 4 / 2 / 1 колонка.

Фиксированная, резиновая и адаптивная сетка

Ключевая мысль: сетка должна подчиняться контенту, а не наоборот.

Адаптивный макет: как перестраивать структуру страницы

Адаптив — это не масштабирование. Это пересборка.

Принципы mobile-first

• сначала минимальный экран
• затем расширение

Это снижает перегруз и улучшает UX.

Перестройка блоков по breakpoint’ам

• изменение порядка блоков
• скрытие второстепенного
• упрощение структуры

👉 Один и тот же контент может иметь разную композицию.

Что делать с меню, карточками, таблицами и формами

• Меню → бургер или drawer
• Карточки → стек
• Таблицы → скролл / карточки
• Формы → пошаговые

Частая ошибка — перенос desktop-логики без изменений.

Про UX и взаимодействие подробнее разобрано в навигации по сайту.

Адаптивный дизайн для планшетов

Планшет — самый недооценённый сценарий.

Планшет как отдельный сценарий, а не “увеличенный смартфон”

На планшете:

• больше места
• но остаётся touch

👉 Это гибрид UX.

Портретная и альбомная ориентация

Один и тот же экран может вести себя как mobile или desktop.

• Portrait → мобильная логика
• Landscape → многоколоночность

Частые ошибки в адаптации под планшеты

• растянутый mobile
• мелкие элементы
• ломаная навигация

Вывод: планшет требует отдельного тестирования.

Базовые правила адаптивного дизайна

Breakpoints как логика контента, а не список устройств

Breakpoints = точки, где ухудшается UX.

Что подтверждено:

• жёсткие списки устройств устарели
• контент-driven подход эффективнее

Что является мифом:

• “нужно делать под iPhone и всё”
• “достаточно 4 экранов”

Минимальные размеры текста и интерактивных элементов

• Текст: 14–16 px минимум
• Кнопки: 44×44 px (Apple guideline)
• Отступы: не менее 8–12 px

Тестирование адаптива на реальных сценариях

• реальные устройства
• промежуточные ширины
• длинный контент

Критически важно:

• проверка ошибок форм
• локализация
• масштабирование текста

Практический выбор: какие breakpoints использовать в 2026

Важно: используйте их как ориентир, а не правило.

FAQ

Adaptive vs Responsive — в чём разница?

Adaptive — фиксированные макеты. Responsive — гибкая система. В 2026 используется гибрид.

Нужен ли отдельный макет под планшет?

Да, если проект сложный (e-commerce, SaaS).

12 или 8 колонок?

12 — универсально, 8 — проще. Часто используется гибрид.

Как адаптировать таблицы?

Скролл, карточки или скрытие второстепенных колонок.

Итог

Адаптивный дизайн — это система решений:

• ширины → управляют структурой
• сетка → управляет композицией
• breakpoints → управляют поведением
• контент → определяет всё остальное

Если вы проектируете не “под устройства”, а под поведение контента — адаптив начинает работать.