Към съдържанието

CSS Media Query генератор

Създайте CSS media queries визуално. Добавете условия за размер на екрана, ориентация, цветова схема и др. Използвайте предварителни настройки за общи breakpoints. Копирайте CSS кода. Безплатен онлайн инструмент.

Условия
Бързи настройки
CSS изход
 

Какво са CSS media queries?

CSS media queries ви позволяват да прилагате стилове условно въз основа на характеристики на устройството, като ширина на екрана, ориентация, предпочитание за цветова схема и др. Те са основата на отзивчивия уеб дизайн.

Медийни характеристики

min-width / max-width насочват към ширини на екрана за отзивчиви оформления. orientation открива портретен или пейзажен режим. prefers-color-scheme уважава предпочитанието на потребителя за тъмен/светъл режим. prefers-reduced-motion открива настройки за достъпност. hover и pointer откриват входни възможности.

Поверителност

Цялото генериране на media queries работи 100% във вашия браузър. Никакви данни не се изпращат на сървър.