Новый синтаксис для медиа-запросов диапазона

Узнайте, как этот новый синтаксис может упростить медиа-запросы.

Rachel Andrew

Медиа-запросы обеспечивают адаптивный дизайн , а функции диапазона, позволяющие проверять минимальный и максимальный размер области просмотра, используются примерно 80% сайтов , использующих медиа-запросы. Спецификация Media Queries Level 4 включает улучшенный синтаксис для этих запросов диапазона.

Следующие примеры показывают, как это может упростить ваши запросы.

Типичное тестирование медиа-запроса на минимальную ширину области просмотра будет выглядеть следующим образом:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Новый синтаксис позволяет использовать оператор сравнения:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Тестирование на максимальную ширину:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

И версия, использующая синтаксис уровня 4:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

Этот синтаксис потенциально может упростить запросы, особенно при тестировании между двумя ширинами. В следующем примере медиа-запрос проверяет область просмотра с минимальной шириной 400 пикселей и максимальной шириной 600 пикселей.

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

Это можно переписать в новом синтаксисе так:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

Функция, которую вы тестируете, в данном случае width , находится между этими двумя значениями.

Помимо того, что медиа-запросы становятся менее многословными, новый синтаксис имеет преимущество точности. Запросы min- и max- включают указанные значения, например min-width: 400px проверяет ширину 400 пикселей или больше. Новый синтаксис позволяет вам более четко выражать то, что вы имеете в виду, и избегать потенциальных конфликтов запросов.

Чтобы использовать новый синтаксис диапазона при учете браузеров, которые его еще не реализовали, существует плагин PostCSS , который перепишет новый синтаксис на старый в ваших таблицах стилей.