The width media feature tests the viewport width (or the page box for paged media). It is a range feature, so you also get min-width and max-width variants.
Use it for responsive layouts—stack on small screens, expand on large ones. It is not the same as the width property, which sizes one element.
device-widthDo not use device-width / min-device-width / max-device-width. Query the viewport with width instead.
em / rem for breakpointsLength features work with px, but em or rem often keep breakpoints in sync when users enlarge text.
@media (width | min-width | max-width: <length>) { … }Modern range syntax also works where supported: @media (width >= 35rem).
widthStart mobile-first with base styles, then layer larger breakpoints with min-width.
@media (min-width: …) to enhance for tablets and desktops.max-width when a tweak should apply only below a size.| Piece | Required? | Role |
|---|---|---|
@media | Yes | Wraps the query |
| Length value | Yes | Breakpoint size (px, em, rem, …) |
min- / max- | Usual | Range matching instead of exact width |
| Base styles | Yes | Look correct before any query matches |
Resize this window. The sample uses real @media (max-width: 600px) and (min-width: 601px) rules. The note shows the current viewport width from JavaScript.
Each snippet focuses on the width media feature. Use Try It Yourself for a live editor—resize the preview pane.
min-widthStart simple, then enhance when the viewport is wide enough.
p {
background: #fecaca;
}
@media (min-width: 35rem) {
p {
background: #dbeafe;
}
}max-width for Narrow ScreensApply a tweak only when the viewport is small.
p {
background: #dbeafe;
}
@media (max-width: 600px) {
p {
background: #fecaca;
}
}Target a band of sizes with both min and max (or modern range syntax).
p {
background: #e2e8f0;
}
@media (min-width: 400px) and (max-width: 700px) {
p {
background: #bbf7d0;
}
}and. Both min and max must match.@media (400px <= width <= 700px) means the same where supported.Viewport queries are easy to confuse with element sizing.
width property@media (min-width: 600px) checks the window. width: 600px sizes a box.
width: is brittle@media (width: 360px) only matches that exact size. Prefer min- / max- ranges.
device-width reflects hardware, not layout. Use viewport width.
The viewport width measurement can include scrollbar space. Avoid razor-thin exact breakpoints.
If you use px breakpoints, zoom text and check layout. em/rem often fare better.
width is a browser media feature. Node.js, Deno, and Bun do not evaluate it.
min-width, max-width, and width media features have been interoperable across browsers for years (Baseline since about July 2015). Foundational for responsive CSS.
Bottom line: Safe for production. Prefer min-width / max-width ranges; avoid deprecated device-width.
min-width, max-width, and exact width.min-width layers.em/rem; never device-width.One line: width media queries adapt CSS to the viewport—size elements with the width property separately.
Browse the CSS properties reference and tutorials.
8 people found this page helpful