Медиа‑запрос применяет набор стилей при соблюдении условий, связанных с устройством и настройками пользователя. Чаще всего так применяют стили для определённой ширины экрана:

/* Применить стили на ширине окна до 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы