Генератор запросов CSS

Генератор запросов CSS

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

Как использовать

1. Выберите Предустановленный вариант фреймворка — Bootstrap 5, Tailwind CSS, Material Design или Пользовательский — затем выберите ширину разрыва.
2. Выберите Тип запроса: минимальная ширина (мобильный первый), максимальная ширина (десктопный первый) или диапазон между двумя ширинами.
3. Выберите Стиль синтаксиса: классический min-width / max-width или новый синтаксис диапазона в медиа-запросах уровня 4 (width >= ...).
4. Включите любые Дополнительные возможности которые хотите, объединенные с разрывом: ориентация, prefers-color-scheme, prefers-reduced-motion, hover или pointer.
5. Скопируйте сгенерированный @media перенесите блок из панели вывода и вставьте его в свой стиль.

Возможности

• Предустановленные фреймворки – Однокликовые разрывы для Bootstrap 5, Tailwind CSS и Material Design, а также режим пользовательского значения для любого значения в пикселях.
• Три режима запросов – Генерация мобильного первого min-width, десктопного первого max-widthили точного запроса диапазона, который нацелен на определенный класс устройства.
• Классический и современный синтаксис – Переключение между традиционными min-width/max-width правилами и чище синтаксисом диапазона в медиа-запросах уровня 4 (width >= X).
• Сочетание медиа-функций – Добавление ориентации, prefers-color-scheme, prefers-reduced-motion, способности к hover и точности указателя на верху любого запроса ширины.
• – вывод и проверка обновляются в реальном времени при вводе или изменении параметров. – Вывод обновляется при изменении входных данных, поэтому вы можете мгновенно просматривать различные комбинации.
• Скопировать и загрузить – Получите CSS одним кликом или сохраните его как .css файл для вашего проекта.