2. Синтаксис и структура

css

Copy

Download

@media [тип устройства] [логическое условие] {

/* Стили, которые применяются при выполнении условия */

}

Основные компоненты:

1. Тип устройства (media type, необязательный)

Определяет категорию устройства, к которому применяются стили:

• all (все устройства, по умолчанию)

• screen (экраны: ПК, смартфоны, планшеты)

• print (принтеры и режим печати)

• speech (скрин-ридеры)

Пример:

css

Copy

Download

@media print {

body { font-size: 12pt; } /* Стили только для печати */

}

2. Логические условия (media features)

Проверяют конкретные параметры:

• Размеры окна:

  • width, min-width, max-width (ширина)

  • height, min-height, max-height (высота)

css

Copy

Download

@media (max-width: 768px) { /* Если ширина ≤ 768px */ }

@media (min-width: 992px) { /* Если ширина ≥ 992px */ }

• Ориентация:

  • orientation: portrait (вертикальная)

  • orientation: landscape (горизонтальная)

css

Copy

Download

@media (orientation: landscape) {

body { background: lightblue; }

}

• Плотность пикселей:

  • resolution (например, min-resolution: 2dppx для Retina-экранов)

• Цветовая схема:

  • prefers-color-scheme: light/dark (тёмная/светлая тема ОС)

• Другие условия:

  • hover: hover (устройство поддерживает наведение курсора)

  • pointer: coarse (сенсорный экран)

3. Комбинирование условий

Можно использовать логические операторы:

• and (и) — все условия должны быть true:

css

Copy

Download

@media (min-width: 768px) and (max-width: 1024px) { ... }

• , (или) — хотя бы одно условие должно быть true:

css

Copy

Download

@media (max-width: 600px), (orientation: portrait) { ... }

• not (отрицание) — инвертирует условие:

css

Copy

Download

@media not (max-width: 600px) { ... }

3. Примеры работы

Пример 1: Адаптивный дизайн (Mobile First)

css

Copy

Download

/* Базовые стили (для мобильных) */

.container { padding: 10px; }

/* Планшеты (≥768px) */

@media (min-width: 768px) {

.container { width: 750px; margin: 0 auto; }

}

/* Десктопы (≥992px) */

@media (min-width: 992px) {

.container { width: 970px; }

.sidebar { float: left; width: 30%; }

}

Пример 2: Тёмная тема

css

Copy

Download

@media (prefers-color-scheme: dark) {

body { background: #222; color: white; }

}

Пример 3: Печатная версия

css

Copy

Download

@media print {

.header, .footer { display: none; }

body { font-family: "Times New Roman", serif; }

}

4. Как браузер обрабатывает @media?

1. Парсинг CSS: Браузер читает весь CSS, включая медиазапросы.

2. Определение параметров:

   • Размер viewport (окна браузера).

   • Тип устройства (экран, принтер и т. д.).

   • Дополнительные настройки (например, тёмная тема в ОС).

3. Применение стилей:

   • Если условие выполняется, стили добавляются в DOM.

   • Если нет — игнорируются.

4. Динамическое обновление:

   • При изменении размера окна (resize), ориентации или системных настроек браузер перепроверяет условия и обновляет стили.