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

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

Rachel Andrew

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

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

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

@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 , который заменит новый синтаксис на старый в ваших таблицах стилей.