Media queries для адаптивного дизайна

Иллюстрация адаптивного дизайна в CSS

Важно: в CSS действует порядок переопределения. Используйте диапазоны (min-width / max-width) и разумную структуру файлов, чтобы избежать неожиданных результатов.

Зачем нужен адаптивный дизайн

Адаптивный дизайн позволяет одному коду HTML/CSS корректно отображаться на смартфонах, планшетах и десктопах. Это не только удобство для пользователя, но и экономия времени разработки и поддержки: одна кодовая база, меньшая вероятность ошибок и лучшее покрытие устройств.

Короткое определение: media query — это правило CSS, которое применяет набор стилей только при соблюдении условий (ширина, высота, ориентация, медиатип).

Основные способы добиться адаптивности

Кратко — используйте комбинацию методов:

Относительные единицы (rem, em, %) вместо абсолютных пикселей (px). Это упрощает масштабирование текста и компонентов.
Метатег viewport в HTML для контроля масштаба на мобильных устройствах.
Media queries для подбора конкретных стилей по размерам экрана и ориентации.

Совет: rem и em управляют размеры относительно базового размера шрифта, % — от родительских блоков. Комбинируйте их для гибкого макета.

Что такое media queries

Media query — функция CSS (появилась в CSS3), которая позволяет применять блок правил только если устройство соответствует набору условий: ширина, высота, ориентация (landscape/portrait) и тип медиа (screen, print, speech).

Преимущества:

Переиспользуемость кода — одни и те же правила можно структурировать под разные устройства.
Читаемость и поддерживаемость — логические блоки стилей для конкретных диапазонов.

Пример повседневной практики: если у вас сотни страниц, media queries помогают менять поведение компонентов глобально без правки каждого файла.

Структура media query

Ниже — общая структура:

        `  
@media only/not media-type and (expression){  
/*CSS code*/  
}`

Компоненты:

Ключевое слово @media
Опциональное only или not
media-type: screen, print или speech
Логический оператор and
Выражение в круглых скобках, например (max-width: 600px)
Блок CSS в фигурных скобках

Пример с only

        `  
@media only screen and (max-width: 450px){  
body{  
background-color: blue;  
}  
}`

Этот пример применит синий фон только на экранах шириной 450px и меньше. Ключевое слово only служит в основном для обратной совместимости — часто его можно опустить.

Пример без типа

        `  
/*design for smartphones*/  
@media(max-width: 450px){  
body{  
background-color: blue;  
}  
}`

По умолчанию запрос без указания media-type применим ко всем типам (screen, print, speech), поэтому указывать тип нужно только если требуется исключение.

Размещение media queries

Media query — это часть CSS, поэтому она может быть:

Внутри тега

Как использовать media queries для адаптивного дизайна