Медиа‑запрос применяет набор стилей при соблюдении условий, связанных с устройством и настройками пользователя. Чаще всего так применяют стили для определённой ширины экрана:
/* Применить стили на ширине окна до 768 пк включительно */
@media (max-width: 768px) {
body {
font-size: 18px;
}
.cols {
flex-wrap: wrap;
}
.mobileNavBtn {
display: block;
}
}В 2023 году в большинстве браузеров поддерживается более простой и понятный формат записи условий в медиа‑запросах — Range Syntax. Новый формат нагляднее и короче, особенно это заметно в комплексных проверках:
Было@media (min-width: 1280px) { /* … */ } @media (max-width: 768px) { /* … */ } @media (max-height: 800px) { /* … */ } @media (min-width: 420px) and (max-width: 767px) { /* … */ }
Стало@media (width >= 1280px) { /* … */ } @media (768px <= width) { /* … */ } @media (height > 800px) { /* … */ } @media (420px < width < 767px) { /* … */ }
На сентябрь 2023 новый формат работает в 82% браузеров. К концу года процент наверняка приблизится к ста. Попробуйте новый формат уже сегодня в тестовых проектах или в боевых, если CSSNext или аналоги, обеспечивающие одинаковую работу современного синтаксиса во всех браузерах.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.