RWD Media Queries
For RWD, media queries are how you change layout, sizing, or visibility when the viewport crosses a breakpoint. Mobile-first stylesheets use min-width; desktop-first use max-width.
Common breakpoints
| Range | Mobile-first query | What's typically inside |
|---|---|---|
| Default | (no query — base styles) | Phone-sized layout. |
| ≥ 640px | @media(min-width: 640px) | Larger phones in landscape. |
| ≥ 768px | @media(min-width: 768px) | Tablets. |
| ≥ 1024px | @media(min-width: 1024px) | Tablet landscape / small laptops. |
| ≥ 1280px | @media(min-width: 1280px) | Most desktops. |
Combining conditions
CSS
/* Tablet-only range */
@media (min-width: 768px) and (max-width: 1023px) {
.sidebar { display: none; }
}
/* Dark mode on small screens only */
@media (prefers-color-scheme: dark) and (max-width: 700px) {
body { background: #111; color: #eee; }
}
Beyond width
(prefers-color-scheme: dark)— user's OS theme.(prefers-reduced-motion: reduce)— accessibility opt-out for animation.(hover: none)— touchscreens. Skip hover-only UI.(orientation: landscape)— wider than it is tall.print— styles for the print stylesheet.
Tip: Group breakpoints with CSS variables and
@media at the end of components. Avoid a giant "responsive.css" file — co-locate the responsive rules with the component they affect.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>RWD Media Queries</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Combine "tablet" min-width with "max-width" desktop in a single query.
@media (min-width: 768px)
(max-width: 1023px) { /* tablet only */ }
Standard logical operator.
Discussion
Loading…