Media Queries
css-media-queries
Code Snippets
React useMediaQuery Hook
Mirroring CSS media queries inside React components keeps logic about responsive breakpoints, dark-mode preference, and reduced motion in one place. The useMediaQuery hook subscribes to a MediaQueryList so renders stay in sync with the browser. This snippet covers the basic match boolean, an SSR-safe variant with an initial fallback, and a useBreakpoint helper that maps named breakpoints onto Tailwind-style logic.
Dark Mode with CSS Variables
Implementing dark mode without a heavy theming library comes down to a stable token contract and a media query. This snippet covers the system-preference dark mode using `prefers-color-scheme`, a class-based override that lets users opt in or out, and a per-component theme that nests tokens for a single section.
Component-Aware Container Queries
Media queries respond to viewport size, but components do not always live at viewport scale: a card might render in a sidebar at 240px or in a feature row at 800px. Container queries let a component style itself based on its own width. This snippet covers the basic `@container` rule, the size container with named breakpoints, and the style container variant for theming children based on parent state.
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.
Print Stylesheet Recipe
When users print a page, they want a clean, readable document, not screenshots of your nav bar. A small `@media print` block can hide chrome, expand link URLs inline, force black-on-white text, and control page sizing and breaks. Drop these recipes into any project that publishes long-form content (articles, receipts, invoices, recipes).