Медиа-запросы — это мощный и универсальный инструмент, который применяется для создания адаптивного дизайна. С их помощью можно проверять различные параметры устройств и области видимости, такие как:
- ширина и высота области видимости;
- ширина и высота устройства;
- ориентация устройства (книжная или альбомная).
Медиа-запросы позволяют использовать различные стили для различных устройств: настольных компьютеров, ноутбуков, планшетов и смартфонов. Они особенно полезны для создания адаптивной верстки, которая обеспечивает оптимальное отображение на всех типах устройств.
Хотя медиа-запросы чаще всего ассоциируются с CSS, они также могут использоваться в HTML и JavaScript.
Использование медиа-запросов в HTML
В HTML медиа-запросы могут быть использованы для выбора определенного стиля в зависимости от условий. Например, можно задать условие для выбора определенного файла CSS в зависимости от ширины экрана:
<html>
<head>
<!-- Стиль для всех экранов -->
<link rel="stylesheet" href="all.css" media="all" />
<!-- Стиль для экранов шириной не менее 50rem -->
<link rel="stylesheet" href="small.css" media="(min-width: 50rem)" />
<!-- Стиль для экранов шириной не менее 80rem -->
<link rel="stylesheet" href="medium.css" media="(min-width: 80rem)" />
</head>
</html>Также медиа-запросы могут быть использованы внутри тега <style>:
<style media="all and (min-width: 800px)">
h1 {
font-size: 2rem;
color: green;
}
</style>Для адаптивных изображений можно использовать тег <picture> с вложенными элементами <source>:
<picture>
<!-- Картинка для альбомной ориентации устройства -->
<source srcset="alligator.png" media="(orientation: landscape)">
<!-- Картинка для книжной ориентации устройства -->
<source srcset="girrafe.png" media="(orientation: portrait)">
<img src="default.png" alt="Default Image">
</picture>Использование медиа-запросов в CSS
Наиболее распространенный способ применения медиа-запросов — это CSS. С помощью правила @media можно задать различные стили для различных устройств или условий:
@media only screen and (min-device-width: 500px) and (max-device-width: 8000px) {
.container {
display: none;
}
}Использование медиа-запросов в JavaScript
В JavaScript медиа-запросы можно применять с помощью метода window.matchMedia(). Например, если нужно изменить фоновый цвет элемента <body> на красный при ширине экрана более 600px, можно использовать следующий код:
// Создаем условие медиа-запроса для минимальной ширины экрана 600px
const mediaQueryCondition = window.matchMedia('(min-width: 600px)');
// Применяем условие медиа-запроса
if (mediaQueryCondition.matches) {
document.body.style.backgroundColor = 'red';
}Таким образом, медиа-запросы позволяют создавать гибкие и адаптивные интерфейсы, которые подстраиваются под разнообразные устройства и условия отображения.
