Узнайте, как этот новый синтаксис может упростить медиа-запросы.
Медиа-запросы обеспечивают адаптивный дизайн , а функции диапазона, позволяющие проверять минимальный и максимальный размер области просмотра, используются примерно 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 , который перепишет новый синтаксис на старый в ваших таблицах стилей.