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

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

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

• Предприниматели и владельцы сайтов, желающие повысить удобство использования своих ресурсов на разных устройствах

  Веб-разработка без адаптивной верстки в 2023 году — всё равно что пытаться скроить один костюм для людей с разным телосложением. Медиа-запросы — это тот самый портновский инструмент, который позволяет элегантно "подгонять" ваш сайт под любые экраны: от крошечных смартфонов до огромных десктопов. Неудивительно, что 73% посетителей покидают сайты с плохой мобильной версткой! В этом руководстве я покажу, как использовать медиа-запросы не просто для "починки" дизайна на разных устройствах, а для создания по-настоящему универсального пользовательского опыта — с рабочими примерами кода и проверенными техниками. 🚀

Хотите освоить адаптивную верстку на профессиональном уровне? Курс Обучение веб-разработке от Skypro предлагает не только теорию медиа-запросов, но и практические проекты с реальными заказчиками. Наши студенты создают адаптивные сайты с первого месяца обучения и к концу программы свободно пишут отзывчивый код для любых устройств — от смартфонов до 4K-мониторов. Бонус: доступ к уникальной библиотеке готовых шаблонов медиа-запросов для коммерческих проектов.

Что такое медиа-запросы и как они работают

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

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

Алексей Степанов, Senior Frontend Developer

Помню, в 2016 году мы разрабатывали крупный информационный портал. Клиент был уверен, что мобильная версия — это просто "уменьшенная копия" десктопа. Я показал ему прототип с адаптивной версткой на реальных устройствах, где навигационное меню трансформировалось в "бургер", а сложные таблицы превращались в карточки. "Но это же совсем другой сайт!" — удивился он. Именно тогда я понял, что грамотные медиа-запросы — не просто технический инструмент, а способ полностью переосмыслить пользовательский опыт для каждого устройства. Использовав подход "mobile-first", мы получили 67%-ный рост мобильного трафика в первый же месяц после запуска.

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

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

Условия медиа-запросов могут проверять множество параметров:

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

Синтаксис медиа-запросов может показаться сложным на первый взгляд, но он следует четкой логике. Базовая структура медиа-запроса выглядит так:

@media [тип медиа] and ([условие]) {
/* CSS-правила, которые будут применены при выполнении условия */
}

Разберем компоненты этого синтаксиса:

1. @media — директива, указывающая браузеру, что следующий код является медиа-запросом
2. Тип медиа (необязательный) — указывает, к какому типу устройств применяются правила (screen, print, etc.)
3. and — логический оператор, объединяющий условия
4. Условие в скобках — параметры, которым должно соответствовать устройство
5. CSS-правила — стили, которые будут применены при выполнении условия

Вот пример простого медиа-запроса, который применяет стили только для экранов шириной менее 600 пикселей:

@media screen and (max-width: 600px) {
.container {
width: 100%;
padding: 10px;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

Можно комбинировать несколько условий с помощью логических операторов:

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

Пример сложного медиа-запроса:

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* Стили для альбомной ориентации на планшетах */
}

Альтернативный синтаксис с использованием "или" (запятая):

@media (max-width: 600px), (orientation: portrait) and (max-width: 850px) {
/* Стили применяются, если ширина менее 600px ИЛИ ориентация портретная И ширина менее 850px */
}

Медиа-запросы можно размещать тремя способами:

1. В файле CSS (самый распространенный вариант)
2. В заголовке HTML-документа:

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

3. С помощью @import (не рекомендуется из-за производительности):

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

Подходы mobile-first и desktop-first: что выбрать

В адаптивной верстке существуют два фундаментальных подхода: mobile-first (сначала мобильные) и desktop-first (сначала десктоп). Выбор между ними влияет не только на порядок написания кода, но и на философию проектирования всего пользовательского опыта. 📱💻

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

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

/* Планшеты */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}

/* Десктопы */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}

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

/* Базовые стили для всех устройств (десктоп) */
.container {
width: 1170px;
margin: 0 auto;
}

/* Планшеты */
@media (max-width: 992px) {
.container {
width: 750px;
}
}

/* Мобильные */
@media (max-width: 767px) {
.container {
width: 100%;
padding: 15px;
}
}

Почему стоит выбрать mobile-first?

• Мобильный трафик превысил десктопный еще в 2016 году и продолжает расти
• Заставляет фокусироваться на ключевом контенте из-за ограниченного пространства
• Улучшает производительность на мобильных устройствах, которые обычно имеют более ограниченные ресурсы
• Соответствует политике Google по индексации mobile-first

Мария Ковалева, Frontend Lead

В 2021 году наша команда работала над редизайном крупного e-commerce проекта. Исторически сайт создавался с desktop-first подходом, и мобильная версия всегда была "падчерицей". Переход на mobile-first потребовал полного пересмотра всей архитектуры. Мы начали с создания прототипов для смартфонов, определили ключевые пользовательские сценарии и только потом расширили функциональность для больших экранов. Этот подход кардинально изменил процесс разработки — дизайнеры перестали втискивать десктопные элементы в мобильные макеты, а разработчики смогли оптимизировать загрузку ресурсов. После запуска конверсия на мобильных устройствах выросла на 23%, а время загрузки страниц уменьшилось на 40%. Теперь я убежденный сторонник mobile-first, особенно для проектов с высокой долей мобильного трафика.

При выборе подхода следует учитывать:

1. Аудиторию проекта и долю мобильного/десктопного трафика
2. Сложность UI элементов (некоторые сложнее адаптировать с десктопа на мобильный)
3. Требования к производительности
4. Командные навыки и предпочтения

В современной разработке рекомендуется использовать mobile-first, особенно для новых проектов. Однако desktop-first может быть оправдан для сервисов со специфичной аудиторией, преимущественно использующей десктопы (например, профессиональные B2B-инструменты). 🖥️

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

Перейдем от теории к практике и рассмотрим конкретные примеры медиа-запросов для различных устройств. Вот базовый набор брейкпоинтов, которые хорошо работают в 2023 году:

/* Мобильные устройства (базовые стили) */
/* Здесь идут стили по умолчанию */

/* Мобильные устройства (горизонтальная ориентация) */
@media (min-width: 576px) {
/* Стили для мобильных в альбомной ориентации */
}

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

/* Десктопы малые */
@media (min-width: 992px) {
/* Стили для маленьких десктопов */
}

/* Десктопы большие */
@media (min-width: 1200px) {
/* Стили для больших десктопов */
}

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

Рассмотрим практический пример адаптивной навигации:

/* Базовый CSS для навигации (мобильная версия) */
.nav-container {
width: 100%;
padding: 10px;
}

.main-nav {
display: none; /* Скрываем десктопную навигацию */
}

.mobile-nav-toggle {
display: block; /* Показываем кнопку меню-бургер */
}

/* Стили для выпадающего мобильного меню */
.mobile-menu {
display: block;
background-color: #f8f9fa;
padding: 15px;
}

.mobile-menu a {
display: block;
padding: 10px 0;
border-bottom: 1px solid #eee;
text-decoration: none;
color: #333;
}

/* Планшеты и выше */
@media (min-width: 768px) {
.nav-container {
padding: 15px 20px;
}

.mobile-nav-toggle {
display: none; /* Скрываем бургер */
}

.main-nav {
display: flex; /* Показываем основную навигацию */
justify-content: space-between;
}

.main-nav a {
margin: 0 15px;
padding: 10px 0;
text-decoration: none;
color: #333;
}

.mobile-menu {
display: none; /* Скрываем мобильное меню */
}
}

/* Десктопы */
@media (min-width: 1200px) {
.nav-container {
width: 1140px;
margin: 0 auto;
padding: 20px 0;
}

.main-nav a {
margin: 0 20px;
font-size: 18px;
}
}

Пример адаптивного грид-лейаута для карточек товаров:

/* Базовый CSS (мобильные) */
.product-grid {
display: grid;
grid-template-columns: 1fr; /* Одна колонка */
gap: 15px;
padding: 15px;
}

.product-card {
border: 1px solid #eee;
border-radius: 5px;
padding: 15px;
}

.product-image {
width: 100%;
height: auto;
}

.product-title {
font-size: 16px;
margin: 10px 0;
}

.product-price {
font-size: 18px;
font-weight: bold;
}

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

.product-title {
font-size: 18px;
}
}

/* Десктопы */
@media (min-width: 992px) {
.product-grid {
grid-template-columns: repeat(3, 1fr); /* Три колонки */
gap: 25px;
padding: 30px;
}
}

/* Большие десктопы */
@media (min-width: 1200px) {
.product-grid {
grid-template-columns: repeat(4, 1fr); /* Четыре колонки */
max-width: 1140px;
margin: 0 auto;
}
}

Адаптация типографики под различные устройства:

/* Базовый CSS (мобильные) */
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}

h1 {
font-size: 24px;
margin-bottom: 15px;
}

h2 {
font-size: 20px;
margin-bottom: 12px;
}

p {
margin-bottom: 15px;
}

/* Планшеты */
@media (min-width: 768px) {
body {
font-size: 17px;
}

h1 {
font-size: 32px;
margin-bottom: 20px;
}

h2 {
font-size: 24px;
margin-bottom: 15px;
}
}

/* Десктопы */
@media (min-width: 1200px) {
body {
font-size: 18px;
}

h1 {
font-size: 42px;
margin-bottom: 25px;
}

h2 {
font-size: 28px;
margin-bottom: 20px;
}

p {
margin-bottom: 20px;
}
}

Для тестирования адаптивности используйте инструменты разработчика в браузере (F12), которые позволяют эмулировать различные устройства. Также полезно проверять сайт на реальных устройствах, так как эмуляция не всегда идеально отображает реальное поведение. 📱

Распространенные ошибки и способы их избежать

Даже опытные разработчики иногда допускают ошибки при работе с медиа-запросами. Знание типичных проблем поможет вам избежать распространенных подводных камней. 🚫

Вот топ-8 самых распространенных ошибок при работе с медиа-запросами:

1. Жестко заданные размеры вместо относительных единиц Использование пикселей (px) вместо относительных единиц (%, em, rem, vw, vh) затрудняет создание по-настоящему адаптивного дизайна.

/* Плохо */
.container {
width: 320px; /* Жестко заданная ширина */
}

/* Хорошо */
.container {
width: 100%; /* Относительная ширина */
max-width: 1200px; /* Лимит для очень больших экранов */
}

2. Пропуск meta viewport тега Без правильного мета-тега viewport мобильные браузеры будут отображать страницу в эмулированном десктопном режиме.

<!-- Обязательно добавляйте в <head> каждой HTML страницы -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Перекрывающиеся медиа-запросы Нечеткие границы между брейкпоинтами могут привести к непредсказуемому поведению.

/* Проблемные перекрывающиеся запросы */
@media (max-width: 768px) { /* От 0 до 768px */ }
@media (min-width: 768px) { /* От 768px и выше */ }

/* Правильное разделение */
@media (max-width: 767px) { /* От 0 до 767px */ }
@media (min-width: 768px) { /* От 768px и выше */ }

4. Слишком много брейкпоинтов Попытка учесть каждое возможное устройство приводит к излишней сложности и трудностям в поддержке кода. Придерживайтесь 4-5 основных брейкпоинтов (например, 576px, 768px, 992px, 1200px) и добавляйте специфичные только при необходимости.

5. Тестирование только на эмуляторах Эмуляторы в инструментах разработчика не всегда точно воспроизводят поведение реальных устройств. Тестируйте на физических смартфонах и планшетах.

6. Игнорирование ориентации устройства Многие забывают, что пользователи могут поворачивать мобильные устройства.

@media (max-width: 768px) and (orientation: landscape) {
/* Стили для альбомной ориентации */
.sidebar {
display: flex;
position: sticky;
top: 0;
}
}

7. Неоптимизированные изображения Загрузка одних и тех же крупных изображений на мобильных устройствах приводит к замедлению и лишнему расходу трафика.

/* CSS подход */
.banner {
background-image: url('small-image.jpg');
}

@media (min-width: 768px) {
.banner {
background-image: url('large-image.jpg');
}
}

/* HTML подход с picture */
<picture>
<source media="(min-width: 768px)" srcset="large-image.jpg">
<img src="small-image.jpg" alt="Баннер">
</picture>

8. Размещение медиа-запросов в неправильном порядке CSS применяет последние объявленные стили, поэтому порядок медиа-запросов критически важен.

/* Правильный порядок для mobile-first */
/* 1. Базовые стили (мобильные) */
/* 2. @media (min-width: 576px) {...} */
/* 3. @media (min-width: 768px) {...} */
/* 4. @media (min-width: 992px) {...} */
/* 5. @media (min-width: 1200px) {...} */

/* Правильный порядок для desktop-first */
/* 1. Базовые стили (десктопные) */
/* 2. @media (max-width: 1199px) {...} */
/* 3. @media (max-width: 991px) {...} */
/* 4. @media (max-width: 767px) {...} */
/* 5. @media (max-width: 575px) {...} */

Дополнительные советы для успешной адаптивной верстки:

• Используйте современные CSS-инструменты: Flexbox и Grid для создания адаптивных макетов вместо float и абсолютного позиционирования
• Применяйте подход "прогрессивного улучшения" (progressive enhancement) — начинайте с базового функционала и добавляйте сложные возможности для более мощных устройств
• Группируйте медиа-запросы для улучшения читаемости кода (либо по компонентам, либо по брейкпоинтам)
• Используйте CSS-препроцессоры (SASS, LESS) для создания миксинов медиа-запросов, чтобы уменьшить дублирование кода
• Не забывайте о производительности — слишком много медиа-запросов может замедлить рендеринг страницы

Если вы работаете в команде, создайте документацию с определенными брейкпоинтами и соглашениями по адаптивной верстке, чтобы все разработчики следовали единому подходу. 📝

Освоение медиа-запросов — не просто техническое умение, а способ мышления о веб-разработке. Умение создавать адаптивные интерфейсы, которые одинаково хорошо работают на любых устройствах, стало не дополнительным навыком, а базовым требованием в индустрии. Наиболее успешные разработчики используют медиа-запросы не только для решения технических проблем верстки, но и для повышения пользовательского опыта, что напрямую влияет на ключевые бизнес-показатели: конверсию, вовлеченность и лояльность. Начните с mobile-first подхода, используйте современные CSS-инструменты, следуйте лучшим практикам — и ваши проекты будут радовать пользователей на любых устройствах, от смартфонов до широкоформатных мониторов.