CSS Snippet
CSS Media Query Recipes (Retina, DPI, Color Depth, Aspect Ratio)
Difficulty: Medium
Media queries do far more than `min-width`. This snippet collects the recipes you reach for in real projects: viewport breakpoints, high-DPI / retina screens, color-depth and color-gamut gating, user preference queries (`prefers-color-scheme`, `prefers-reduced-motion`), and aspect-ratio plus orientation for video and game UIs. Drop the ones you do not need; keep the rest as a starting point.
CSS Media Query Recipes (Retina, DPI, Color Depth, Aspect Ratio)
Media queries do far more than `min-width`. This snippet collects the recipes you reach for in real projects: viewport breakpoints, high-DPI / retina screens, color-depth and color-gamut gating, user preference queries (`prefers-color-scheme`, `prefers-reduced-motion`), and aspect-ratio plus orientation for video and game UIs. Drop the ones you do not need; keep the rest as a starting point.
874 views
13
Mobile-first means your base CSS is the smallest screen and each @media (min-width: ...) block layers on richer styles for larger viewports. This avoids the override-fest that happens when you write desktop styles first and then max-width queries to undo them. Pick three or four breakpoints and stick with them; common starting points are 640px (small tablet), 1024px (small laptop), and 1440px (large desktop). Use rem and % for sizing inside the queries so a user changing the browser zoom or root font size still gets a comfortable layout.
dppx is dots per pixel: 1dppx is 96 device-pixels per CSS-pixel (a regular monitor), 2dppx is the retina-class threshold, 3dppx is the very-high-density tier on flagship phones. The modern recipe is a single min-resolution: 2dppx block that swaps in a higher-resolution asset; for print, use 300dpi. The legacy -webkit-min-device-pixel-ratio query is still recognized by older WebKit but is no longer required for current browsers. Prefer <picture> and srcset for responsive <img> tags; CSS background-image swapping is best reserved for purely decorative assets.
color-gamut and color both describe display capabilities; in practice, only color-gamut: p3 matters for new work because it lets you opt into wider color spaces with a clean fallback. Far more important are the user-preference queries: prefers-color-scheme is how dark mode should be wired (CSS variables flipping inside the media query is the cleanest pattern), and prefers-reduced-motion is an accessibility requirement, not a nicety. The (color: 8) recipe maps to the legacy "4 bits per color component" and "256-color device" use cases; modern devices easily clear that bar, so treat it as historical. Always design for prefers-reduced-motion: reduce first and add motion as enhancement, not the other way around.
aspect-ratio accepts a fraction (16/9, 4/3, 1/1) and the min- and max- variants give you ranges. orientation: landscape means width is greater than height, regardless of how the device is held; do not assume landscape means desktop. The comma between media queries is logical OR; the and keyword is logical AND. Combine viewport-width with orientation when you want a specific phone-in-landscape layout that should not affect tablets. Keep the rule list short; if a media query has more than two conditions, consider whether a CSS custom property + a different breakpoint would be cleaner.