CSS Media Query Generator
Налаштування media query
Query
Media features
CSS всередині media query
Status
Idle
Live preview
Media query preview
Item 1
Item 2
Item 3
Item 4
Про 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.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.
CSS Grid Generator
Створюй CSS Grid layouts з колонками, рядками, відступами, вирівнюванням, live preview і готовим CSS.
Інші інструменти
›
CSS Flexbox Generator
Створюй CSS flexbox-розкладки з live preview, налаштуванням вирівнювання, напрямку, переносу, gap і готовим CSS для копіювання.
Інші інструменти
›
CSS Container Query Generator
Генеруйте CSS container queries з container type, container name, breakpoint-умовами та responsive CSS declarations.
Інші інструменти
›
CSS генератор фонових патернів
Створюйте CSS-фони з крапками, сіткою, смугами, діагональними лініями та шаховим патерном.
Інші інструменти
›
FAQ
Що таке CSS media query?
CSS media query застосовує стилі лише тоді, коли браузер або пристрій відповідає певним умовам, наприклад ширині екрана чи color scheme.
Краще використовувати min-width чи max-width?
min-width частіше підходить для mobile-first layout, а max-width — коли треба напряму таргетити менші екрани.
Чи можна через media query визначити dark mode?
Так. Media feature prefers-color-scheme дозволяє таргетити dark або light mode.
Чи допомагають media queries з accessibility?
Так. prefers-reduced-motion дозволяє зменшити або прибрати анімації для користувачів, які обрали менше руху.