Syntax
@media (min-width: 768px) { }Examples
Mobile-First Breakpoints
The recommended approach - base styles for mobile, then progressively enhance for larger screens.
.container {
padding: 16px; /* mobile default */
}
@media (min-width: 768px) {
.container {
padding: 32px;
max-width: 720px;
margin: 0 auto;
}
}
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}Combining Conditions
Testing multiple media features together, and targeting print output.
@media (min-width: 768px) and (orientation: landscape) {
.sidebar { display: block; }
}
@media print {
.no-print { display: none; } /* hide navigation, buttons, etc when printing */
}Parameters and values
- min-width / max-width (feature): Tests viewport width, the most common responsive breakpoint
- orientation (feature): Tests portrait vs landscape orientation
- print (media type): Applies styles specifically for printed output
Best practices
- Write mobile-first CSS using min-width breakpoints, progressively adding complexity for larger screens, rather than max-width desktop-first overrides
- Base breakpoints on where your own content actually starts looking cramped or awkward, rather than copying generic device-width numbers
- Prefer container queries over media queries for component-level responsiveness - reserve media queries for page-level, viewport-driven layout
- Use @media print to hide non-essential UI (navigation, buttons) and optimize layout specifically for printed pages
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Specificity
When multiple CSS rules target the same element with conflicting declarations, specificity determines which one wins. It is calculated as a four-part value: inline styles, ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors, compared in that order from most to least significant.Cascade Layers (@layer)
@layer lets you explicitly define the priority order between groups of CSS rules, independent of selector specificity. Styles in a layer declared later always beat styles in an earlier layer, regardless of how specific the earlier layer's selectors are - solving specificity conflicts between resets, frameworks, components, and overrides in a predictable, structured way.Custom Properties (CSS Variables)
Custom properties, written as --name, let you define reusable values directly in CSS, accessed with var(). Unlike Sass variables, they are live in the browser - they can be read and changed with JavaScript, and they respect the cascade, meaning their value can be different in different parts of the DOM.prefers-color-scheme & prefers-reduced-motion
These media queries detect user system preferences rather than device characteristics. prefers-color-scheme detects whether the user has requested a light or dark theme at the OS level. prefers-reduced-motion detects whether the user has requested minimal animation, important for users with vestibular motion sensitivity.
When multiple CSS rules target the same element with conflicting declarations, specificity determines which one wins. It is calculated as a four-part value: inline styles, ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors, compared in that order from most to least significant.Cascade Layers (@layer)
@layer lets you explicitly define the priority order between groups of CSS rules, independent of selector specificity. Styles in a layer declared later always beat styles in an earlier layer, regardless of how specific the earlier layer's selectors are - solving specificity conflicts between resets, frameworks, components, and overrides in a predictable, structured way.Custom Properties (CSS Variables)
Custom properties, written as --name, let you define reusable values directly in CSS, accessed with var(). Unlike Sass variables, they are live in the browser - they can be read and changed with JavaScript, and they respect the cascade, meaning their value can be different in different parts of the DOM.prefers-color-scheme & prefers-reduced-motion
These media queries detect user system preferences rather than device characteristics. prefers-color-scheme detects whether the user has requested a light or dark theme at the OS level. prefers-reduced-motion detects whether the user has requested minimal animation, important for users with vestibular motion sensitivity.