Quick answer: Responsive design has two layers. Media queries adapt the page to the viewport, while CSS container queries adapt a component to the space it is given, wherever it is placed. Modern practice is to build fluid layouts first, use clamp() for flexible sizing, then add CSS container queries for components and media queries only for page-level changes and user preferences.
Table of Contents
The viewport meta tag
None of this works on a phone without the meta tag, which tells the browser to use the device width rather than pretending to be a desktop.
<meta name="viewport" content="width=device-width, initial-scale=1" />Note what is missing: user-scalable=no and maximum-scale=1. Disabling zoom is an accessibility problem, so leave them out.
Fluid first, breakpoints second
Before adding any breakpoint, let things scale smoothly. clamp() sets a value that grows with the viewport but never leaves a sensible range.
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }
.section { padding-block: clamp(2rem, 5vw, 5rem); }Read clamp(min, preferred, max) as: never smaller than the minimum, never larger than the maximum, and normally the preferred value. That single line replaces a trio of font-size rules at three breakpoints, and it works at every width in between.
Media queries for the page
Media queries still matter for page-level changes and for user preferences. Breakpoints should come from where your content breaks, not from device names.
@media (min-width: 768px) {
.layout { grid-template-columns: 240px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
@media (prefers-color-scheme: dark) {
:root { --bg: #0f172a; --fg: #e2e8f0; }
}The last two are not about size at all: they respect the user’s motion and colour preferences. They belong in every project, and they are the clearest example of why media queries are not obsolete.
CSS container queries for components
A card does not know whether it sits in a wide main column or a narrow sidebar. A media query cannot help, because it only sees the viewport. Container queries fix this by letting a component respond to its own container.
.card-host { container-type: inline-size; container-name: card; }
/* inside the component: switch layout when the container is wide enough */
@container card (min-width: 400px) {
.card { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; }
}Declare the container with container-type: inline-size, then query it with @container. The same card renders stacked in a narrow sidebar and side-by-side in a wide column, with no page-level breakpoints and no JavaScript. Container queries became widely available in 2025 and are now the right tool for reusable components.
Media queries or CSS container queries — a rule of thumb
| Question | Use |
|---|---|
| Does the whole page reflow? | Media query |
| Does one reusable component adapt to its slot? | Container query |
| Is it about motion or colour preference? | Media query |
| Is it about the component’s available width? | Container query |
Testing habit: drag the window slowly from very narrow to very wide and watch the in-between sizes, not just the presets. Most layout bugs live between breakpoints, where a heading wraps awkwardly or one card grows taller than its neighbours.
Next: custom properties and @property. To learn responsive design with a mentor, Ampersand Academy teaches web development one-to-one.
Frequently asked questions
What is the difference between a media query and a container query?
A media query responds to the viewport or user preferences. A container query responds to the size of the element’s own container, so a component can adapt wherever it is placed.
What does clamp() do in CSS?
It sets a value with a minimum, a preferred value and a maximum, so text or spacing scales smoothly with the viewport but never leaves a sensible range.
Are media queries still needed in 2026?
Yes. They remain the right tool for page-level layout changes and for user preferences such as prefers-reduced-motion and prefers-color-scheme.
How do I set up a container query?
Add container-type inline-size to the parent to make it a query container, then write @container with a min-width condition to adapt the child inside it.
Should I disable zoom with user-scalable=no?
No. Blocking zoom prevents users who need to enlarge text, which is an accessibility failure. Use width=device-width and initial-scale=1 only.
Last updated on · Written by Dinesh Kumar R
