CSS Media Queries
Раньше создание веб-сайта было намного проще. Сегодня макет веб-сайта должен подстраиваться не только под компьютеры, но и под планшеты, мобильные устройства и даже телевизоры.
Создание веб-сайта с адаптируемым макетом называется адаптивным веб-дизайном. И CSS Media Queries — одна из самых важных частей адаптивного дизайна. В этой статье мы более подробно рассмотрим Медиа запросы и способы их использования в CSS.
Что такое Медиа запрос?
Медиа запрос (Media Queries) — это функция CSS3, которая используется для адаптации макета веб-страницы к различным размерам экрана и типам устройств.
Если еще проще, то Медиа запросы предназначены для создания адаптивных дизайнов. Адаптивный дизайн отличается от других тем, что он может изменяться в зависимости от ширины экрана устройства.
Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 480 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.
Возможности Медиа запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.
Также при создании адаптивных web страниц необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение адаптивных дизайнов сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы.
Подключение метатега viewport на сайте осуществляется так:
<meta name="viewport" content="width=device-width, initial-scale=1">
Синтаксис
Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа функции.
@media media type and (condition: breakpoint) {
//CSS-правила
}
Мы можем ориентироваться на различные типы медиа в различных условиях. Если условие логических операторов and/or выполняется и типы мультимедиа соответствуют, то будут применены правила внутри Медиа запроса, в противном случае они не будут применяться.
Сначала синтаксис может показаться сложным, поэтому давайте подробно объясним каждую часть…
@ Медиа Правило
Создание Медиа запроса начинается с ключевого слова @media, после которого указывается одно или несколько условий. В качестве условия можно указывать тип устройства или требования к определённой характеристике. Они записываются в круглых скобках.
Позже включаем Правила CSS внутри фигурных скобок.
Например:
@media (max-width: 480px) {
//CSS-правила
}
Комбинирование нескольких условий выполняется с помощью логических операторов and/or — ( И/ИЛИ )
.Пример медиа запроса с комбинированием нескольких условий:
@media (min-width: 992px) and (max-width: 1200px) {
//CSS-правила
}
Внутри скобок мы устанавливаем условие. Например, я хочу применить больший размер шрифта для мобильных устройств. Для этого нам нужно установить максимальную ширину, которая проверяет ширину устройства:
.text {
font-size: 14px;
}
@media (max-width: 480px) {
.text {
font-size: 16px;
}
}
Обычно размер текста будет 14px. Однако, поскольку мы применили медиа запрос, он изменится на 16 пикселей, когда максимальная ширина устройства составит 480 пикселей или меньше.
Типы носителей
Если мы не применяем тип носителя, правило @media по умолчанию выбирает все типы устройств. В противном случае типы Media идут сразу после правила @media. Существует много видов устройств, но мы можем разделить их на 5 категорий:
- all — Все типы. Это значение используется по умолчанию.
- handheld — Смартфоны и аналогичные им аппараты.
- print — Принтеры
- screen — для экранов компьютеров, планшетов и смартфонов
- speech — для программ чтения с экрана, которые «читают» страницу вслух
Например, когда мы хотим выбрать только экраны, устанавливаем ключевое слово screen сразу после правила @media. Также должны объединить правила с помощью ключевого слова and:
@media screen and (max-width: 480px) {
.text {
font-size: 16px;
}
}
Логические операторы, применяемые в Медиа запросах
Логические операторы and, , (запятая), not и only предназначены для создания сложных Медиа запросов.
and — Логическое И. Указывается для объединения нескольких условий.
Пример. Стиль для всех цветных устройств:
@media all and (color) { ... }
not — Логическое НЕ. Указывается для отрицания условия.
Пример. Стиль для всех устройств кроме смартфонов:
@media all and (not handheld) { ... }
Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение
@media not all and (color) { ... }
следует понимать как:
@media not (all and (color)) { ... }
а не:
@media (not all) and (color) { ... }
only — Применяется для старых браузеров, которые не поддерживают Медиа запросы.
В настоящее время это уже не актуально, поэтому использовать only не нужно.
В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.
В этом примере стили будут применяться к странице в двух случаях. Когда width > /= 544px или ориентация portrait.
@media (min-width: 544px), (orientation: landscape) { ... }
Также при использовании операторов следует указывать скобки, чтобы менять приоритет операций.
Медиа характеристики
При составлении условия кроме типов устройств и логических операторов можно ещё задавать требования к определённым характеристикам, которые должен иметь браузер, устройство вывода, или окружение. В некоторых источниках характеристики называют медиа функциями.
Медиа функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.
Каждая характеристика в @media должна быть заключена в круглые скобки.
Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселов.
Медиа запросы в <link> и @import
При подключении таблицы стилей можно с помощью атрибута media установить медиа запросы и тем самым определить условия, когда они должны использоваться.
<link rel="stylesheet" media="screen and (max-width: 991.98px)" href="/assets/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 992px)" href="/assets/desktop.css">
Кроме <link>, их также можно использовать в @import:
@import url(mobile.css) screen and (max-width: 991.98px);
@import url(desktop.css) screen and (min-width: 992px);
Точки останова
Функции ширины или точки останова, пожалуй, самый распространенный термин, который вы будете использовать. Функция ширины — это ключ к определению момента изменения макета и адаптации новых правил внутри медиа запросов. Вернемся к нашему примеру в самом начале:
@media (max-width: 480px) {
.text {
font-size: 16px;
}
}
Здесь точка останова равна 480px. Теперь медиа запрос знает, когда установить или перезаписать новый класс. По сути, если ширина устройства меньше 480 пикселей, будет применен текстовый класс, в противном случае — нет.
Распространенные точки останова: есть ли стандартное разрешение?
Какую точку останова следует использовать? Поскольку на рынке существует множество устройств, то невозможно определить фиксированные значения для каждого из них.
Следовательно, мы не можем сказать, что существует стандартное разрешение для устройств, однако в повседневном программировании есть несколько часто используемых вариантов. Если вы используете фреймворки CSS (например, Bootstrap и др.), вы также можете применять их точки останова.
Рассмотрим некоторые распространенные точки останова:
- 320 px — 480 px: мобильные устройства
- 481px — 768px: iPad, планшеты
- 769px — 1024px: маленькие экраны, ноутбуки
- 1025px — 1200px: настольные компьютеры, большие экраны
- 1201px и более — очень большие экраны, телевизор
Как уже было сказано выше, точки останова могут различаться и точно определенного стандарта нет, однако приведенные выше примеры используются чаще всего.
Заключение
Адаптивный дизайн является обязательным в современном веб-дизайне и разработке. Медиа запросы — одна из самых важных частей создания отзывчивых макетов, и надеемся что данная статья поможет вам разобраться и понять, как работают Медиа запросы.
