Что такое CSS медиа-запрос?

CSS медиа-запрос - это техника, позволяющая применять различные стили в зависимости от характеристик устройства, таких как размер экрана, разрешение, ориентация или цветовая схема. Медиа-запросы являются основой адаптивного веб-дизайна, позволяя веб-сайтам адаптировать свой макет и внешний вид на различных устройствах - от смартфонов до настольных мониторов. Они используют правило @media в CSS для условного применения стилей только при выполнении определённых условий.

Описание инструмента

Этот инструмент помогает генерировать CSS медиа-запросы без необходимости запоминать сложный синтаксис. Просто выберите целевой тип медиа, укажите размеры, выберите функции устройства, и инструмент сгенерирует полное правило @media, готовое к использованию в ваших таблицах стилей. Он поддерживает все современные возможности медиа-запросов, включая размеры области просмотра, ориентацию экрана, соотношения сторон, определение разрешения и предпочтения цветовой схемы.

Возможности

  • Выбор типа медиа: Выбор между типами all, screen, print или speech
  • Управление размерами: Установка минимальной и максимальной ширины/высоты с любой единицей CSS (px, em, rem, vw и т.д.)
  • Функции устройства: Настройка ориентации, соотношения сторон, разрешения и предпочтений цветовой схемы