Медиа-запросы CSS: полное руководство по синтаксису для верстки

Для кого эта статья:

• Веб-разработчики и фронтенд-программисты
• Дизайнеры UI/UX
• Студенты и начинающие специалисты в области веб-технологий

Время загрузки сайта превышает 3 секунды? Пользователь уходит. Сайт неадекватно отображается на телефоне? Прощай, конверсия. Медиа-запросы CSS — ключевой механизм современной адаптивной вёрстки, позволяющий создавать сайты, которые идеально работают на любом устройстве. От микро-часов до гигантских мониторов, от смартфонов до телевизоров Smart TV — грамотно построенные медиа-запросы обеспечивают безупречное отображение контента везде. Статья раскрывает все тонкости их применения, от базового синтаксиса до продвинутых техник. 📱➡️🖥️

Основы медиа-запросов CSS и их роль в адаптивной верстке

Медиа-запросы (media queries) — это мощный инструмент CSS, позволяющий применять определённые стили в зависимости от характеристик устройства пользователя. По сути, они работают как условные операторы: "если устройство соответствует этим параметрам — примени следующие стили".

Концепция адаптивного дизайна, введённая Итаном Маркоттом в 2010 году, кардинально изменила подход к верстке веб-страниц. Вместо создания отдельных версий сайта для разных устройств, разработчики получили возможность адаптировать один и тот же HTML-код под различные экраны с помощью CSS.

Антон Савельев, ведущий фронтенд-разработчик Вспоминаю 2011 год, когда мы впервые столкнулись с необходимостью адаптировать крупный новостной портал под мобильные устройства. Тогда подход "mobile-first" казался экзотикой, а iPhone 4 только появился на рынке. Наше первое решение было предсказуемым — создать отдельную мобильную версию с редиректом. Это привело к кошмару в поддержке: любые изменения приходилось вносить дважды, а иногда функциональность "терялась" между версиями. Переход на адаптивный дизайн с медиа-запросами сократил время разработки на 40% и полностью решил проблему несогласованности версий. Самое удивительное — когда появились планшеты, нам не пришлось создавать третью версию, мы просто добавили новые breakpoints в медиа-запросы.

Базовый синтаксис медиа-запроса выглядит следующим образом:

@media [тип носителя] and ([условие]) {
/* CSS правила */
}

Ключевые преимущества использования медиа-запросов:

• Единая кодовая база для всех устройств
• Автоматическая адаптация под различные размеры экранов
• Возможность таргетировать специфические устройства
• Повышение скорости загрузки (по сравнению с отдельными версиями сайта)
• Улучшение SEO (единый URL для всех устройств)

В основе современной адаптивной верстки лежит концепция "breakpoints" (точек перелома) — пороговых значений ширины экрана, при которых макет сайта претерпевает значительные изменения для оптимизации пользовательского опыта.

Важно понимать, что с помощью медиа-запросов разработчики адаптировали сайт под маленькие экраны, поэтому играть с телефона удобно, а функциональные возможности остаются такими же, как в компьютерной версии. С телефона пользователи могут создавать контент, управлять настройками и пользоваться всеми функциями сайта без ограничений.

Синтаксис и структура CSS медиа-запросов для разных устройств

Синтаксис медиа-запросов CSS строго определен и следует конкретным правилам. Рассмотрим его детальнее и разберем различные варианты применения.

Существует несколько способов подключения медиа-запросов:

1. Внутри CSS-файла:

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

2. В теге <style>:

<style>
@media (max-width: 768px) {
.container {
width: 100%;
}
}
</style>

3. В теге <link>:

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

4. С помощью @import:

@import url('mobile.css') (max-width: 768px);

Полная структура медиа-запроса выглядит так:

@media [not|only] [тип медиа] [and|or|,] ([медиа-функция]: [значение]) {
/* CSS-правила */
}

Где:

• not — отрицает весь медиа-запрос
• only — применяется для устранения проблем совместимости со старыми браузерами
• тип медиа — указывает тип устройства (screen, print и др.)
• and, or, ,(запятая) — логические операторы для объединения условий
• медиа-функция — свойство, которое проверяется (width, height, orientation и др.)
• значение — конкретное значение медиа-функции

Наиболее часто используемые медиа-функции для адаптивной верстки:

При разработке адаптивного дизайна существует два основных подхода: "mobile-first" и "desktop-first". Каждый из них влияет на то, как мы структурируем медиа-запросы.

Марина Крылова, UI/UX дизайнер На одном из проектов для крупного интернет-магазина мы столкнулись с интересной статистикой: более 70% пользователей заходили с мобильных устройств, но конверсия у них была на 40% ниже, чем у десктопных пользователей. После тщательного анализа мы обнаружили, что применяли подход "desktop-first", и мобильный интерфейс был перегружен элементами, плохо адаптированными для маленьких экранов. Мы полностью переработали верстку по принципу "mobile-first", используя медиа-запросы с min-width вместо max-width. Это заставило нас сначала создать минималистичный, но полнофункциональный интерфейс для смартфонов, который затем "расширялся" для больших экранов. Результат — рост мобильной конверсии на 35% за первый месяц после релиза.

При подходе "mobile-first" базовые стили разрабатываются для мобильных устройств, а медиа-запросы с min-width используются для расширения функциональности на больших экранах:

/* Базовые стили для мобильных устройств */
.container {
width: 100%;
font-size: 16px;
}

/* Адаптация для планшетов */
@media (min-width: 768px) {
.container {
width: 750px;
font-size: 18px;
}
}

/* Адаптация для десктопов */
@media (min-width: 1200px) {
.container {
width: 1170px;
font-size: 20px;
}
}

Напротив, при подходе "desktop-first" сначала создается полнофункциональная версия для больших экранов, а затем с помощью медиа-запросов с max-width она адаптируется для мобильных устройств. Этот подход часто используется при адаптации уже существующих десктопных сайтов.

Типы медиа и условия запросов для контроля отображения

Медиа-запросы CSS позволяют контролировать отображение контента на основе различных типов медиа и условий. Это дает разработчикам гибкость в создании по-настоящему адаптивных интерфейсов. 🔄

Основные типы медиа включают:

• all — все типы устройств (используется по умолчанию)
• print — для печатных устройств и предпросмотра печати
• screen — экраны компьютеров, планшетов, смартфонов
• speech — скринридеры и другие устройства синтеза речи

Например, создание специальных стилей для печати позволяет оптимизировать страницу при ее распечатке — убрать ненужные элементы, изменить цвета и т.д.:

@media print {
nav, footer, .ads {
display: none; /* Скрываем навигацию, футер и рекламу при печати */
}

body {
font-size: 12pt;
color: #000;
background: #fff;
}

a {
color: #000;
text-decoration: none;
}

a:after {
content: " (" attr(href) ")"; /* Показываем URL ссылок */
}
}

Для экранных устройств существует обширный набор медиа-функций, позволяющих точно настраивать отображение контента:

• width/height — ширина/высота области просмотра
• device-width/device-height — ширина/высота устройства
• orientation — ориентация устройства (portrait/landscape)
• aspect-ratio — соотношение сторон области просмотра
• device-aspect-ratio — соотношение сторон устройства
• color — количество бит на цветовой компонент
• color-index — количество цветов, поддерживаемых устройством
• monochrome — количество бит на пиксель в монохромном буфере
• resolution — плотность пикселей устройства
• scan — тип сканирования для телевизионных устройств
• grid — устройство использует сеточный или битмап-дисплей

Ориентация устройства — важный параметр для мобильных интерфейсов. Можно создавать разные макеты для портретной и альбомной ориентации:

/* Стили для портретной ориентации */
@media (orientation: portrait) {
.gallery {
flex-direction: column;
}
}

/* Стили для альбомной ориентации */
@media (orientation: landscape) {
.gallery {
flex-direction: row;
}
}

Для высокоплотных дисплеев (Retina и аналогичных) можно использовать медиа-функцию resolution:

/* Стандартное изображение */
.logo {
background-image: url('logo.png');
}

/* Изображение высокого разрешения для Retina дисплеев */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
.logo {
background-image: url('logo@2x.png');
}
}

Особым случаем является определение dark mode (темной темы), которую поддерживают современные браузеры:

/* Светлая тема (по умолчанию) */
:root {
--bg-color: #ffffff;
--text-color: #333333;
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #f0f0f0;
}
}

body {
background-color: var(--bg-color);
color: var(--text-color);
}

Еще одно важное применение медиа-запросов — обеспечение доступности. Например, можно добавить специальные стили для пользователей, предпочитающих уменьшенное движение (reduced motion):

/* Анимация по умолчанию */
.button {
transition: transform 0.3s ease;
}

.button:hover {
transform: scale(1.1);
}

/* Отключаем анимацию для пользователей, предпочитающих уменьшенное движение */
@media (prefers-reduced-motion: reduce) {
.button {
transition: none;
}

.button:hover {
transform: none;
}
}

Комплексные медиа-запросы: логические операторы и диапазоны

Для создания по-настоящему адаптивных интерфейсов часто требуются более сложные условия, чем простая проверка ширины экрана. Комплексные медиа-запросы позволяют объединять несколько условий с помощью логических операторов, создавать диапазоны значений и точно таргетировать нужные устройства. 🎯

В CSS медиа-запросах доступны следующие логические операторы:

• and — объединяет условия по принципу логического "И" (оба условия должны быть истинными)
• not — отрицает весь медиа-запрос (возвращает истину, если условия не выполняются)
• only — используется для совместимости со старыми браузерами (фактически не влияет на логику)
• запятая (,) — работает как логическое "ИЛИ" (запрос истинен, если хотя бы одно условие выполняется)

Оператор and позволяет комбинировать несколько условий, которые должны выполняться одновременно:

/* Применяется только для экранов с шириной от 768px до 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
width: 90%;
margin: 0 auto;
}
}

Оператор not инвертирует результат всего медиа-запроса:

/* Применяется ко всем устройствам, кроме принтеров */
@media not print {
.navigation {
display: block;
}
}

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

/* Применяется либо для печати, либо для узких экранов */
@media print, (max-width: 480px) {
.large-table {
font-size: 10px;
}
}

Для определения диапазонов значений можно использовать комбинацию min-/max- префиксов:

/* Средние экраны (планшеты) */
@media (min-width: 768px) and (max-width: 1024px) {
/* Стили для планшетов */
}

/* Большие экраны */
@media (min-width: 1025px) {
/* Стили для больших экранов */
}

/* Маленькие экраны */
@media (max-width: 767px) {
/* Стили для смартфонов */
}

Современный CSS также позволяет использовать диапазонные медиа-запросы с помощью операторов сравнения:

/* Современный синтаксис диапазона (поддерживается не всеми браузерами) */
@media (width >= 768px) and (width <= 1024px) {
/* Стили для планшетов */
}

Комплексные медиа-запросы особенно полезны при работе с разными типами устройств, имеющими похожие характеристики экрана. Например, можно отличить смартфон в альбомной ориентации от планшета в портретной ориентации:

/* Смартфон в альбомной ориентации */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
.nav {
position: absolute;
bottom: 0;
}
}

/* Планшет в портретной ориентации */
@media (max-width: 900px) and (orientation: portrait) and (min-height: 700px) {
.nav {
position: fixed;
top: 0;
}
}

Также можно объединять проверки устройства и его характеристик:

/* Стили для печати на цветных принтерах */
@media print and (color) {
.chart {
border: 1px solid #ccc;
}
}

/* Стили для печати на черно-белых принтерах */
@media print and (monochrome) {
.chart {
border: 1px solid #000;
stroke-dasharray: 5,5; /* Пунктирная граница для различения элементов */
}
}

Для устройств с высокой плотностью пикселей (например, Retina-дисплеи) можно использовать комбинацию условий:

/* Высокоплотные дисплеи на устройствах с шириной менее 768px */
@media (max-width: 768px) and (min-resolution: 2dppx) {
.logo {
background-image: url('logo-mobile@2x.png');
}
}

Практическое применение медиа-запросов в современной верстке

Теоретические знания о медиа-запросах имеют ценность только в контексте их практического применения. Рассмотрим, как использовать медиа-запросы для решения реальных задач современной веб-разработки. 💻

Вот наиболее распространенные сценарии использования медиа-запросов в адаптивной верстке:

1. Создание гибких макетов — адаптация структуры страницы под разные размеры экрана
2. Управление размерами шрифтов — обеспечение комфортного чтения на любом устройстве
3. Адаптация навигации — трансформация меню для разных устройств
4. Оптимизация изображений — загрузка изображений подходящего размера и разрешения
5. Управление видимостью элементов — показ/скрытие контента в зависимости от устройства

Рассмотрим подход к созданию гибкого макета с использованием CSS Grid и медиа-запросов:

.grid-container {
display: grid;
gap: 20px;

/* Базовый макет для мобильных устройств – одна колонка */
grid-template-columns: 1fr;
}

/* Планшеты – две колонки */
@media (min-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}

/* Десктопы – четыре колонки */
@media (min-width: 1200px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
}
}

/* Большие экраны – шесть колонок */
@media (min-width: 1800px) {
.grid-container {
grid-template-columns: repeat(6, 1fr);
gap: 30px;
}
}

Адаптивная типографика с помощью медиа-запросов позволяет обеспечить оптимальную читаемость текста на любых устройствах:

/* Базовые размеры для мобильных */
:root {
--h1-size: 24px;
--h2-size: 20px;
--p-size: 16px;
--line-height: 1.4;
}

/* Средние экраны */
@media (min-width: 768px) {
:root {
--h1-size: 32px;
--h2-size: 26px;
--p-size: 18px;
--line-height: 1.5;
}
}

/* Большие экраны */
@media (min-width: 1200px) {
:root {
--h1-size: 40px;
--h2-size: 32px;
--p-size: 20px;
--line-height: 1.6;
}
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
p { 
font-size: var(--p-size);
line-height: var(--line-height);
}

Трансформация навигации — один из ключевых аспектов адаптивного дизайна. Часто требуется преобразовать горизонтальное меню в мобильное "бургер-меню":

/* Десктопное меню */
.nav-items {
display: flex;
list-style: none;
gap: 20px;
}

.burger-icon {
display: none;
}

/* Мобильное меню */
@media (max-width: 767px) {
.nav-items {
display: none; /* Скрываем обычное меню */
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
padding: 20px;
}

.nav-items.active {
display: flex; /* Показываем при клике на "бургер" */
}

.burger-icon {
display: block; /* Показываем "бургер" */
}
}

Оптимизация загрузки изображений с помощью медиа-запросов и HTML-атрибута srcset:

/* В HTML */
<img 
src="image-medium.jpg"
srcset="image-small.jpg 400w, image-medium.jpg 800w, image-large.jpg 1600w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt="Адаптивное изображение"
/>

/* В CSS можно дополнить */
@media (max-width: 600px) {
img {
margin-bottom: 10px;
}
}

Для фоновых изображений можно использовать разные файлы в зависимости от размера экрана:

.hero {
background-image: url('hero-mobile.jpg');
background-size: cover;
height: 50vh;
}

@media (min-width: 768px) {
.hero {
background-image: url('hero-tablet.jpg');
height: 60vh;
}
}

@media (min-width: 1200px) {
.hero {
background-image: url('hero-desktop.jpg');
height: 70vh;
}
}

Управление видимостью элементов позволяет оптимизировать пользовательский опыт, показывая только необходимый контент:

/* Упрощенная версия таблицы для мобильных устройств */
@media (max-width: 600px) {
.table-cell.less-important {
display: none; /* Скрываем неприоритетные колонки */
}

.mobile-only-summary {
display: block; /* Показываем мобильное резюме */
}
}

/* Полная версия для больших экранов */
@media (min-width: 601px) {
.table-cell.less-important {
display: table-cell;
}

.mobile-only-summary {
display: none;
}
}

С помощью медиа-запросов разработчики адаптировали сайт под маленькие экраны, поэтому играть с телефона удобно, а функциональные возможности они такие же, как в компьютерной версии. С телефона пользователи могут создавать контент так же эффективно, как и с десктопных устройств.

Container Queries — следующий шаг эволюции адаптивного дизайна, позволяющий компонентам адаптироваться к размеру своего контейнера, а не к размеру экрана:

/* Современный синтаксис Container Queries */
.container {
container-type: inline-size;
container-name: sidebar;
}

@container sidebar (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 2fr 1fr;
}
}

@container sidebar (max-width: 399px) {
.card {
display: flex;
flex-direction: column;
}
}

Медиа-запросы стали фундаментальным инструментом создания адаптивных интерфейсов, но их потенциал раскрывается полностью только при стратегическом применении. Не думайте о них как о "заплатках" для разных экранов — рассматривайте их как элементы единой системы дизайна, которая плавно трансформируется под любые условия. Комбинируйте их с современными техниками вроде CSS Grid, Flexbox и переменных, чтобы создавать по-настоящему отзывчивые интерфейсы. Помните: хороший адаптивный дизайн не тот, что работает на любом устройстве, а тот, что пользователь даже не замечает, переключаясь между устройствами.