Медиазапросы (media queries) в CSS — это механизм, позволяющий применять различные стили в зависимости от характеристик устройства вывода, таких как ширина экрана, высота, ориентация, разрешение, тип устройства и др. Основная цель — создание отзывчивых (responsive) интерфейсов, которые адаптируются под разные размеры экранов: от мобильных до широких десктопов.

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

@media media_type and (condition) {
/\* CSS-правила, применяемые при выполнении условий \*/
}

Примеры:

/\* Пример для экранов шириной до 600px \*/
@media screen and (max-width: 600px) {
body {
background-color: lightgray;
}
}

/\* Пример для экранов от 601px до 1024px \*/
@media screen and (min-width: 601px) and (max-width: 1024px) {
body {
background-color: white;
}
}

Типы медиазапросов (media types)

• all — по умолчанию, для всех устройств.

• screen — экраны, включая десктопы, планшеты, телефоны.

• print — принтеры, печатные устройства.

• speech — синтез речи.

Пример:

@media print {
body {
color: black;
background: white;
}
}

Наиболее часто используемые медиапараметры (media features)

Размеры окна и экрана

• width, min-width, max-width — ширина viewport.

• height, min-height, max-height — высота viewport.

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

Ориентация

• orientation: portrait — вертикальная ориентация.

• orientation: landscape — горизонтальная ориентация.

@media (orientation: landscape) {
.image {
width: 70%;
}
}

Разрешение (density)

• resolution: 300dpi, min-resolution, max-resolution

• resolution: 2dppx — для дисплеев высокой плотности (ретина)

@media (min-resolution: 2dppx) {
img {
content: url(image@2x.png);
}
}

Цветовая палитра и глубина цвета

• color, color-index, monochrome — применяются крайне редко.

Взаимодействие пользователя

• hover, pointer, any-hover, any-pointer

@media (hover: hover) {
button:hover {
background-color: blue;
}
}

Темы интерфейса

• prefers-color-scheme: dark или light — предпочтения пользователя по цветовой схеме.

@media (prefers-color-scheme: dark) {
body {
background: #111;
color: #eee;
}
}

Логические операторы

and

Соединяет несколько условий (все должны быть выполнены):

@media screen and (min-width: 600px) and (orientation: portrait) {
/\* правила \*/
}

not

Отрицание:
@media not screen and (max-width: 600px) {
/\* применится, если ширина больше 600px \*/
}

only

Защита от старых браузеров, которые не поддерживают медиазапросы:
@media only screen and (min-width: 768px) {
/\* применяется только если поддерживаются медиазапросы \*/
}

Запятая (,)

Аналог логического OR. Любое из условий может выполниться:
@media (max-width: 600px), (orientation: portrait) {
/\* правила \*/
}

Медиазапросы и мобильная верстка

Подход mobile-first

Сначала пишется CSS для мобильных устройств, затем через min-width добавляются стили для планшетов и десктопов.

/\* Базовые стили для мобильных \*/
body {
font-size: 14px;
}
/\* Добавляем стили для планшетов и выше \*/
@media (min-width: 768px) {
body {
font-size: 16px;
}
}

Подход desktop-first

Сначала пишутся стили для десктопа, затем добавляются max-width стили для сужающихся экранов.

/\* Стили для десктопа \*/
body {
font-size: 18px;
}
/\* Мобильная адаптация \*/
@media (max-width: 600px) {
body {
font-size: 14px;
}
}

Подключение медиазапросов через <link>

Можно подключать отдельные CSS-файлы с медиазапросами через HTML:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css">

Медиазапросы в SCSS/SASS

SASS позволяет писать более компактные и модульные медиазапросы:

.container {
width: 100%;
@media (min-width: 768px) {
width: 50%;
}
}

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

/\* Телефоны в портретной ориентации \*/
@media (max-width: 480px) { ... }
/\* Смартфоны в альбомной ориентации и маленькие планшеты \*/
@media (min-width: 481px) and (max-width: 767px) { ... }
/\* Планшеты \*/
@media (min-width: 768px) and (max-width: 1024px) { ... }
/\* Десктопы \*/
@media (min-width: 1025px) { ... }

Проверка медиазапросов в DevTools

Современные браузеры (Chrome, Firefox, Safari) позволяют проверять медиазапросы через инструменты разработчика:

• В Chrome: Ctrl+Shift+M или иконка устройства → выбрать разные экраны.

• Список срабатывающих медиазапросов отображается в панели стилей справа.

Медиазапросы являются основой адаптивного дизайна. Они позволяют подстраивать внешний вид веб-приложений под особенности устройств, тем самым улучшая пользовательский опыт.