CSS Media Query Generator

Media queries let you apply different styles based on device characteristics—screen size, orientation, resolution. Wrap CSS rules in @media blocks with conditions, and they only apply when those conditions match.

The classic use? Responsive design. Show three columns on desktop, one on mobile. Hide navigation on small screens, show a hamburger menu instead.

Syntax: @media (min-width: 768px) { /* styles here */ }. Everything inside only applies on screens 768px and wider.

All modern browsers support them. Essential tool for modern web design—can't build responsive sites without them.

Min-width means "at least this wide"—@media (min-width: 768px) applies on screens 768px and up. Good for mobile-first design: start with mobile styles, add complexity as screens get bigger. Max-width means "at most this wide"—@media (max-width: 767px) applies on screens 767px and below.

I prefer min-width and mobile-first. Easier to progressively enhance—add features as you get more space. Either works though. Just be consistent and don't mix approaches randomly.

No universal standard, but here's what I typically use: 640px (large phones), 768px (tablets), 1024px (small laptops), 1280px (desktops), 1536px (large screens). Tailwind's defaults, and they work well for most projects.

Honestly? Base breakpoints on your design, not specific devices. Where does your layout break? That's your breakpoint.

Don't go overboard—3-4 breakpoints usually cover everything. Too many and your CSS gets bloated.

Content should dictate breakpoints, not arbitrary device widths.

Mobile-first. Start with mobile styles as your base, use min-width queries to add complexity for larger screens. Easier to enhance than to strip away. Most traffic is mobile anyway—makes sense to prioritize it.

Desktop-first uses max-width to simplify as screens shrink. Can work, but you end up overriding lots of desktop styles for mobile. More code, more maintenance.

Mobile-first also encourages better performance—mobile styles load first, enhancements come later.

Yep. Orientation: @media (orientation: landscape) or @media (orientation: portrait). Useful for tweaking layouts when phones rotate.

Dark mode: @media (prefers-color-scheme: dark). Detects system-level dark mode preference. Super popular feature these days.

Other useful queries:

• (prefers-reduced-motion) for users who want minimal animations
• (hover: hover) for devices with hover capability
• (resolution: 2dppx) for high-DPI screens

You can combine them too: @media (min-width: 768px) and (orientation: landscape).

Container queries let you style elements based on their parent container's size instead of viewport size. Use @container instead of @media. Game-changer for component-based design.

Example: a card component that adjusts based on its container, not the screen. Set container-type: inline-size on the parent, then @container (min-width: 400px) { /* styles */ }.

Browser support is growing—most modern browsers have it now. Makes components truly reusable since they respond to their context, not the global viewport.