CSS Media Query Builder

What is CSS Media Query Builder?

CSS Media Query Builder creates CSS @media rules with a visual interface. Select media features (screen width, height, orientation, color scheme, resolution, pointer, hover) and combine them with AND/OR logic to generate the correct media query syntax. Preview how the query would match at different viewport sizes, and copy the complete @media rule with placeholder CSS inside.

CSS Media Queries (Media Queries Level 4) allow conditional CSS application based on device or browser capabilities. Syntax: @media [media-type] and (feature: value) { ... }. Common media types: screen (default), print, all. Common media features: width, min-width, max-width, height, orientation (portrait/landscape), prefers-color-scheme (light/dark), prefers-reduced-motion, hover, pointer (fine/coarse/none -- detects touch vs mouse), resolution (for HiDPI/Retina screens).

Modern responsive design best practices: use min-width (mobile-first) rather than max-width (desktop-first). Use relative units (em, rem) in media query breakpoints -- 48em instead of 768px -- so the breakpoint scales with user font size preferences. Use prefers-reduced-motion for animation-heavy sites to respect accessibility. Use prefers-color-scheme for automatic dark mode. CSS Container Queries (@container) are the modern alternative for component-level responsive design.

How to Use

Select a media feature from the feature picker (width, color-scheme, orientation, etc.).
Set the value (breakpoint in pixels, or select portrait/landscape, light/dark).
Add more features with AND/OR logic using the '+' button.
Preview which devices would match the query using the device simulator.
Copy the complete @media rule with an editable CSS block inside.

Examples

Mobile-first breakpoint

Result: @media (min-width: 768px) { .container { max-width: 1200px; } }

Dark mode styles

Result: @media (prefers-color-scheme: dark) { body { background: #0d1117; color: #e6edf3; } }

Reduced motion

Result: @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

Frequently Asked Questions

What is mobile-first responsive design?

Mobile-first means writing base CSS for mobile screens and using min-width media queries to progressively enhance for larger screens. Example: .nav { display: none; } @media (min-width: 768px) { .nav { display: flex; } } -- navigation is hidden on mobile, shown on tablets and above. Advantages over desktop-first (max-width): starts with the most constrained environment, encourages content prioritization, generally cleaner CSS (additive rather than subtractive), better performance (mobile devices load less CSS). Frameworks: Tailwind CSS is mobile-first (sm: = min-width 640px). Bootstrap 5 is also mobile-first.

What breakpoints should I use for responsive design?

Common breakpoints (approximate): 640px / 40em (small -- large phones in landscape). 768px / 48em (medium -- tablets). 1024px / 64em (large -- desktop). 1280px / 80em (xl -- wide desktop). 1536px / 96em (2xl -- large displays). Tailwind's defaults: sm:640px, md:768px, lg:1024px, xl:1280px, 2xl:1536px. Bootstrap 5: sm:576px, md:768px, lg:992px, xl:1200px, xxl:1400px. Better practice: choose breakpoints based on your content, not device sizes. Design in fluid units and add breakpoints where the layout breaks. Avoid too many breakpoints.

What is prefers-reduced-motion and why should I implement it?

prefers-reduced-motion is a CSS media feature that detects if the user has requested minimal motion (via OS accessibility settings: on macOS: System Settings > Accessibility > Display > Reduce Motion). Users who enable this include: people with vestibular disorders (motion sickness from animations), people with seizure sensitivity, and those who simply prefer less visual noise. Implementation: @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }. WCAG 2.1 Success Criterion 2.3.3 (AAA) addresses this.

What are CSS Container Queries and how do they differ from media queries?

Media queries respond to the viewport (browser window) size. Container Queries (@container, 2023) respond to the size of a specific parent element -- enabling truly component-responsive design. Example: define a container: .card-grid { container-type: inline-size; container-name: card-grid; }. Use it: @container card-grid (min-width: 400px) { .card { flex-direction: row; } }. Now the card layout changes based on its container size, not the viewport. This means the same card component works in a sidebar (narrow) and main content (wide) without any JS. Browser support: Chrome 106+, Firefox 110+, Safari 16+.

How do I use media queries for print styles?

Print media queries let you customize how your page looks when printed or saved as PDF. @media print { .nav, .sidebar, .ads { display: none; } a::after { content: ' (' attr(href) ')'; } body { font-size: 12pt; color: #000; background: #fff; } }. Best practices: hide navigation, ads, and interactive elements. Show link URLs (using attr() in content). Use print-safe units (pt, cm) for font sizes. Expand accordions and collapsibles. Break pages appropriately with page-break-before, page-break-after, orphans, widows. Test with Ctrl+P / Cmd+P in the browser to preview before publishing.