Выросшее количество устройств, используемых для доступа в интернет, вынуждает разработчиков создавать веб-сайты, оптимизированные для разных размеров и ориентации экрана. Для разработки адаптивного дизайна используется такой инструмент в CSS, как медиа-запросы (media queries). В этой статье мы рассмотрим определение медиа-запросов, их синтаксис, характеристики, возможности, а также рекомендации по работе с media queries.
Назначение медиа-запросов
Медиа-запросы (media queries) — это CSS-правила, позволяющие применять стили к веб-документу в зависимости от характеристик устройства, на котором он просматривается. Например, в медиа-запросе может быть указано, что определенный набор стилей следует применять только тогда, когда размер экрана меньше определенной ширины. Это позволяет разработчикам создавать стили, характерные для различных устройств, размеров экрана и других характеристик среды пользователя.
Прежде чем перейти к разбору возможностей медиа-запросов, стоит упомянуть важный для адаптивного дизайна метатег — viewport. Он позволяет правильно устанавливать область видимости адаптивных сайтов на устройствах с различной плотностью пикселей.
Подключается метатег следующим образом:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
В атрибуте content тега viewport прописываются настройки, которые задают ширину области просмотра равной ширине экрана устройства (width=device-width) и начальный уровень масштабирования 100% (initial-scale=1.0).
Синтаксис медиа-запросов
Медиа-запросы обычно прописываются в CSS, но и иногда используются в HTML и JavaScript.
Синтаксис media query в CSS начинается с ключевого слова @media, после которого указывается любое количество условий, таких как тип устройства, минимальная или максимальная ширина окна браузера, ориентация устройств и так далее. Если условий несколько, то их комбинирование производится с помощью логических операторов — and, not и запятой (,).
Как и в обычном CSS-селекторе, после условий прописываются фигурные скобки, в которых указываются правила CSS. Эти CSS-правила будут выполняться, если условия, описанные в медиа-запросе, будут удовлетворены. Таким образом, с помощью media queries удается задавать стили для различных устройств и браузеров, тем самым контролируя правильность отображения дизайна на них.
Пример медиа-запроса в CSS, который растягивает блок с классом hero-left на всю ширину относительно своего родителя, если область видимости экрана составляет от 992px до 1199px.
@media screen and (min-width: 992px) and (max-width: 1199px) {
.hero-left {
width: 100%;
}
} В HTML медиа-запросы можно использовать, добавляя атрибут media с указанием условий отображения:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen and (max-width: 767px)" href="mobile.css">
<link rel="stylesheet" media="screen and (min-width: 768px)" href="desktop.css">
</head> В этом примере файл mobile.css будет подключен на экранах с максимальной шириной 767px. А для тех экранов, ширина которых 768px и более, будет применен файл desktop.css. Этот способ может быть полезен, если вы хотите разделить стили для разных устройств, что может улучшить производительность сайта.
Помимо этого, в HTML также можно задавать media queries в теге style:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media screen and (min-width: 992px) {
.container {
flex-direction: row;
}
}
</style>
</head> Медиа-запросы можно использовать и в JavaScript. Метод matchMedia помогает определить, удовлетворяется ли условие, переданное ему в качестве параметра. Этот метод возвращает объект MediaQueryList, и если обратиться к его свойству matches, то получим результат в виде булевого значения.
Окрасим фон тега body в разные цвета для устройств с областью отображения до и после 767px:
const mediaQueryList = window.matchMedia('(max-width: 767px)');
if (mediaQueryList.matches) {
document.body.style.backgroundColor = '#ccc';
} else {
document.body.style.backgroundColor = '#000';
} Типы устройств в медиа-запросах
Условия медиа-запроса включают в себя тип носителей, для которого применяются CSS-свойства этого media query. На сегодняшний день наиболее распространенными являются следующие типы:
all— все типы устройств (значение по умолчанию);screen— устройства, имеющие экран, такие как настольные компьютеры, ноутбуки, планшеты и смартфоны (это наиболее часто используемый тип);print— принтеры и иные устройства печати (полезен для оптимизации макета и типографики веб-страницы для печати, например, для удаления меню навигации или увеличения размера шрифта);speech— скринридеры (программы, которые читают и произносят текст с экрана).
Пример медиа-запроса для устройств с экраном:
@media screen {
/* CSS-свойства */
} Медиа-функции
Еще один вид условий, из которого состоит медиа-запрос — это медиа-функции. Медиа-функции используются для выявления определенных характеристик устройства и свойств экрана с целью применения конкретных CSS-стилей. Разберем некоторые часто используемые медиа-функции.
width и height
Медиа-функции width и height используются для определения размеров области просмотра или устройства. С помощью этих медиа-функций мы можем определить максимальную и минимальную ширину и высоту экрана, а также их диапазон.
Примеры:
/* для экранов с максимальной шириной 600px */
@media screen and (max-width: 600px) {
/* CSS-стили */
}
/* для экранов с минимальной высотой 768px */
@media screen and (min-height: 768px) {
/* CSS-стили */
}
/* для экранов шириной от 480px до 768px */
@media screen and (min-width: 480px) and (max-width: 768px) {
/* CSS-стили */
} orientation
Для определения ориентации устройства (книжной или альбомной), используется медиа-функция orientation, которая имеет два значения: portrait (книжная) и landscape (альбомная).
Пример:
@media screen and (orientation: landscape) {
/* CSS-стили */
} aspect-ratio
Также возможно определять соотношение между шириной и высотой области просмотра или устройства. Это делается с помощью медиа-функции aspect-ratio.
Примеры:
/* для экранов с соотношением сторон 16:9 */
@media screen and (aspect-ratio: 16/9) {
/* CSS-стили */
}
/* для экранов с соотношением сторон от 16:9 до 21:9 */
@media screen and (min-aspect-ratio: 16/9) and (max-aspect-ratio: 21/9) {
/* CSS-стили */
} resolution
Если мы хотим применить стили для определенных разрешений экрана, например, для экранов с высоким разрешением или Retina, нужно воспользоваться медиа-функцией resolution.
Примеры:
/* для экранов с разрешением 300dpi */
@media screen and (resolution: 300dpi) {
/* CSS-стили */
}
/* для экранов с разрешением между 300dpi и 600dpi */
@media screen and (min-resolution: 300dpi) and (max-resolution: 600dpi) {
/* CSS-стили */
} color и monochrome
С помощью медиа-функций color и monochrome можно различать цветные и монохромные экраны.
Примеры:
@media screen and (color) {
/* CSS-стили */
}
@media screen and (monochrome) {
/* CSS-стили */
} hover и pointer
Медиа функции hover и pointer позволяются выявить устройства с определенным типом взаимодействия, например, мышь или сенсорный экран.
Примеры:
/* для устройств с возможностью наведения курсора на элемент (например, с помощью мыши) */
@media (hover: hover) {
/* CSS-стили */
}
/* для устройств с указателем ограниченной точности (например, с сенсорным экраном) */
@media (pointer: coarse) {
/* CSS-стили */
}
/* для устройств с точным указателем (например, мышь) */
@media (pointer: fine) {
/* CSS-стили */
} Комбинирование условий и логические операторы
На случай когда нам необходимо прописать несколько условий для медиа-запроса (что бывает довольно часто) либо задать отрицание условия, существуют логические операторы. Опишем назначение каждого из них:
and— все условия медиа-запроса являются истиной;,(«или») — хотя бы одно из является истинным;not— отрицается условие.
Примеры:
/* Для экранов с шириной от 768px до 1199px */
@media screen and (min-width: 768px) and (max-width: 1199px) {
/* CSS-свойства */
}
/* Для экранов с максимальной шириной 360px либо с альбомной ориентацией */
@media screen and (max-width: 360px), (orientation: landscape) {
/* CSS-свойства */
}
/* Не для экранов */
@media not screen {
/* CSS-свойства */
} Рекомендации по использованию медиа-запросов
Вот несколько рекомендаций по работе с media queries в CSS:
- Прежде чем приступить к работе с медиа-запросами, спланируйте свой дизайн. Подумайте о разных размерах экрана и о том, как вы хотите, чтобы дизайн выглядел на каждом из этих экранов. Определите брейкпоинты и макет, который вы хотите применить к ним.
- Используйте медиа-запросы экономно и только при необходимости. Не создавайте ненужную сложность, применяя несколько media queries к одному и тому же элементу или создавая сложные стили, которые трудно поддерживать.
- Тестируйте медиа-запросы на реальных устройствах, чтобы убедиться, что они работают должным образом. Не полагайтесь исключительно на настольное тестирование или симуляторы.
- Создавайте media queries в организованном и легко читаемом виде. Используйте комментарии и группируйте их по размеру экрана. Это облегчит поддержку вашего кода и внесение изменений при необходимости.
- Убедитесь, что ваш дизайн доступен для всех пользователей, в том числе для людей с ограниченными возможностями. Проверьте свой дизайн с помощью программ чтения с экрана и других специальных возможностей.
Подводя итог, отметим, что медиа-запросы являются важным инструментом современной веб-разработки, позволяющим разработчикам создавать адаптивный дизайн, который подстраивается под различные размеры экрана и устройств. Используя media queries, разработчики могут гарантировать, что их веб-сайты будут отлично выглядеть и работать на любом устройстве, от настольных компьютеров и ноутбуков до планшетов и смартфонов. В силу высокой популярности мобильных устройств в нашей повседневной жизни навык работы с медиа-запросами и адаптивным дизайном является существенно необходимым.