Это старая версия документа!
# Медиа-запросы
Медиа-запросы (media queries) – это функциональность CSS, позволяющая адаптировать стили веб-страницы к характеристикам устройства пользователя.
Основная цель медиа-запросов – создание адаптивного дизайна. Такой подход обеспечивает комфортное отображение веб-страниц на устройствах с разными размерами экранов, от смартфонов до больших мониторов.
Для корректной работы адаптивного дизайна важен метатег viewport, который указывается в разделе <head> HTML-документа. Этот метатег помогает браузеру интерпретировать ширину экрана устройства и масштаб отображения страницы. Без него адаптивные стили могут работать некорректно.
Пример подключения метатега viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
Общий синтаксис медиа-выражения:
@media [тип устройства] and ([характеристика]) {
/* CSS-правила */
}
здесь:
- тип устройства (опционально) – определяет, для каких устройств применяются стили (например, screen или print). Если тип не указан, запрос будет применяться ко всем устройствам.
- характеристика — указывает параметры устройства, такие как min-width, orientation и так далее.
- and - логический оператор, применяемый для комбинирования нескольких условий, так же применяются операторы not и запятая (,), которая действует как логическое «или».
Пример:
@media (min-width: 768px) and (max-width: 1440px)
## Характеристики
Наиболее часто применяемыми