Генератор CSS Media Queries
Налаштування media query
Живий перегляд
Про CSS media query generator
Цей інструмент допомагає створювати responsive CSS media queries без ручного написання повного синтаксису. Можна вибрати брейкпоінти, орієнтацію, color scheme, motion preference і hover support.
Він корисний для responsive cards, layouts, navigation blocks, dark mode стилів і accessibility-friendly reduced motion правил.
Як користуватись
- Вибери media type: screen, print або all.
- Задай min-width або max-width брейкпоінти для responsive layout.
- За потреби додай orientation, color scheme, reduced motion або hover conditions.
- Напиши CSS body, який має застосовуватись всередині media query.
- Скопіюй готовий @media block у свій stylesheet.
Поради
- Використовуй max-width, коли хочеш напряму таргетити менші екрани.
- Використовуй min-width для mobile-first підходу, коли layout поступово розширюється.
- prefers-reduced-motion допомагає зменшити анімації для користувачів, які цього потребують.
- prefers-color-scheme зручно використовувати для простого dark mode або light mode.
Перевірки media query перед додаванням breakpoint
Media queries мають реагувати на content і можливості користувача, а не лише на звичні ширини конкретних devices.
Використовуйте content breakpoints
Додавайте breakpoint там, де layout перестає працювати, замість орієнтації на модель phone, tablet або desktop.
Уникайте gaps на межах
Тестуйте точні breakpoint values і використовуйте послідовний range syntax, щоб fractional widths не випадали з правил.
Враховуйте user preferences
Перевірте prefers-reduced-motion, color scheme, contrast, forced colors та input capabilities, якщо UI залежить від них.
Тестуйте реальні viewports
Перевірте portrait і landscape, zoom, browser chrome, split screen, embedded views та довші переклади.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.