3.10. Адаптивность

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Адаптивность

★ Адаптивный дизайн – возможность подстраивать дизайн сайта под разные устройства.

Адаптивный дизайн CSS включает в себя медиа-запросы (@media), а в HTML добавляют метатег для мобильных. Это позволяет решать проблемы масштабирования на мобильных, и использовать для мобильной и десктопной версии сайта, чтобы элементы меняли размеры/расположения на разных экранах.

★ Медиа-запросы (@media) в CSS

Медиа-запросы (@media) в CSS представляют собой механизм, позволяющий применять стили условно, в зависимости от характеристик устройства или окна просмотра (viewport), таких как ширина, высота, разрешение, ориентация и другие.

Синтаксис @media позволяет определять правила стилизации, которые активируются только при выполнении указанных условий. Это ключевой инструмент для реализации адаптивного и отзывчивого веб-дизайна.

@media <медиа-тип> and (<условие>) {
    /* CSS-правила */
}

На практике чаще всего используется только условие по размеру экрана, а медиа-тип (например, screen, print) часто опускается — по умолчанию предполагается screen.

Примеры использования

/* Только для экранов от 768px до 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .grid { grid-template-columns: 1fr 1fr; }
}

/* Для мобильных устройств (до 768px) */
@media (max-width: 767.98px) {
    body { font-size: 14px; }
    .menu { display: none; }
}

/* Для печати */
@media print {
    .sidebar { display: none; }
    body { font-size: 10pt; }
}

Порядок медиа-запросов имеет значение при каскадировании. Обычно рекомендуется располагать их от меньших к большим размерам (mobile-first) или наоборот, но важно соблюдать согласованность.

Граничные значения (breakpoints) должны соответствовать реальным устройствам или дизайну макета. Распространённые точки: 320px, 768px, 1024px, 1200px.

Вместо фиксированных значений можно использовать переменные (через CSS custom properties) для централизованного управления breakpoints.

Медиа-запросы могут быть вложены внутрь других CSS-правил (начиная с CSS3), что улучшает читаемость:

.component {
    display: block;

    @media (min-width: 768px) {
        display: flex;
    }
}

★ Viewport (метатег для мобильных) в HTML

Viewport — это область отображения веб-страницы, доступная пользователю для просмотра контента. В контексте веб-разработки термин «viewport» имеет особое значение при работе с мобильными устройствами и адаптивным дизайном.

Физический viewport — это фактическое разрешение экрана устройства (например, 360×640 пикселей). Определяется аппаратно.

Виртуальный (или layout) viewport — это область, которую браузер использует для отрисовки страницы. На мобильных устройствах по умолчанию он шире физического (обычно около 980px), чтобы обеспечить совместимость с сайтами, не предназначенными для мобильных устройств. Это приводит к необходимости масштабирования.

Без управления viewport содержимое может отображаться уменьшенным, требуя ручного масштабирования со стороны пользователя, что ухудшает UX.

Чтобы корректно управлять отображением на мобильных устройствах, используется метатег:

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

Параметры атрибута content:

width=device-width — устанавливает ширину виртуального viewport равной ширине экрана устройства.
initial-scale=1.0 — задаёт начальный коэффициент масштабирования, равный 1 (без увеличения).
user-scalable=yes|no — разрешает или запрещает пользователю масштабировать страницу.
minimum-scale, maximum-scale — ограничивают диапазон масштабирования.
height — аналогично width, но для высоты (используется редко).

Пример расширенного метатега:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=2.0">

Примечание: запрет масштабирования (user-scalable=no) может снижать доступность и не рекомендуется без веской причины.

После установки width=device-width медиа-запросы начинают работать относительно реальной ширины экрана.

Например:

@media (max-width: 768px) {
    /* Применится, когда ширина viewport ≤ 768px */
}

Такой подход позволяет строить адаптивные макеты, где структура и стиль изменяются в зависимости от размера устройства.

На некоторых смартфонах (например, iPhone с notch) существуют так называемые unsafe areas — зоны, перекрытые элементами корпуса (вырезом, скруглениями). Для их учёта используются env() переменные:

body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

Это предотвращает обрезание контента в угловых зонах экрана.

★ Переменные в CSS (custom properties) – свойства, которые позволяют хранить и переиспользовать значения (цвета, отступы, к примеру). Они упрощают поддержку кода и позволяют динамически менять их (например, через JavaScript). Таким образом, можно указать не конкретное значение, допустим, цвета, а дать указание на использование значения переменной через var(). Вот как их можно объявить и использовать:

  :root {
    --primary-color: #3498db;
    --spacing: 20px;
  }
  
  .button {
    background: var(--primary-color);
    padding: var(--spacing);
  }

Адаптивность​

Адаптивность