Медиазапросы CSS
Адаптивные веб-страницы зависят от медиазапросов, которые применяют стили в соответствии с характеристиками устройства или среды, отображающей страницу.
Чтобы добавить их в таблицу стилей, используйте правило @media.
Синтаксис Медиазапроса
Каждый медиазапрос содержит одну или несколько медиахарактеристик, каждая из которых принимает значение true или false, а также может содержать тип медиа. Тип медиа можно опустить, если только вы не используете not, который его требует.
Запрос в целом истинен, когда тип медиа соответствует типу устройства и все медиахарактеристики истинны. Тогда его правила стиля вступают в силу с учётом обычных правил каскадирования.
not: Необязательное ключевое слово, которое инвертирует значение всего запроса.
and: Ключевое слово, которое соединяет тип медиа с одной или несколькими медиахарактеристиками.
Синтаксис медиазапроса
Общая форма правила медиазапроса в том виде, в каком вы его пишете.
@media [not] media-type and (media-feature: value)
and (media-feature: value) {
/* CSS rules to apply */
}
Типы Медиа CSS
Тип медиа называет вид медиа, для которого предназначены стили. Он необязателен, и если его опустить, это означает all.
all— Охватывает все типы медиаустройств.print— Применяется в режиме предварительного просмотра печати.screen— Применяется к экранам компьютеров, планшетов и смартфонов.
Медиахарактеристики CSS
Каждая медиахарактеристика проверяет одну конкретную особенность устройства. Вот некоторые из наиболее часто используемых:
max-height— Максимальная высота области просмотра.min-height— Минимальная высота области просмотра.height— Высота области просмотра, включая полосу прокрутки.max-width— Максимальная ширина области просмотра.min-width— Минимальная ширина области просмотра.width— Ширина области просмотра, включая полосу прокрутки.orientation— Альбомная или книжная ориентация области просмотра.resolution— Разрешение экрана.prefers-color-scheme— Цветовая схема (светлая или тёмная), которую предпочитает пользователь.
Примеры Медиазапросов
Цвет фона с min-width
Как только ширина области просмотра достигает 480px или больше, этот медиазапрос делает цвет фона body светло-зелёным.
@media screen and (min-width: 480px).
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query Min-Width</title>
<style>
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The background color will be lightgreen when the viewport is 480 pixels wide or wider.</p>
</body>
</html>
Цвет фона с min и max-width
Здесь цвет фона body светло-зелёный только пока ширина области просмотра остаётся между 480px и 768px.
@media screen and (min-width: 480px) and (max-width: 768px).
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query Min and Max Width</title>
<style>
@media screen and (min-width: 480px) and (max-width: 768px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The background color will be lightgreen when the viewport is between 480 and 768 pixels wide.</p>
</body>
</html>