Responsive Design and Media Queries
A site that looks great on any device
Responsive design — like water
Water takes the shape of any container. A responsive site does the same: on a phone it shows one column, on a tablet two, on a desktop three. Content isn't clipped or overflowing.
Viewport meta tag — mandatory!
<meta name="viewport" content="width=device-width, initial-scale=1.0">Without this, a mobile browser scales the page as if it were a desktop (everything tiny). With it — the page takes the real screen width.
Media queries — styles for specific sizes
/* Mobile First — start with mobile */
.cards { grid-template-columns: 1fr; } /* 1 column for phone */
@media (min-width: 640px) {
.cards { grid-template-columns: repeat(2, 1fr); } /* tablet — 2 */
}
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(3, 1fr); } /* desktop — 3 */
}Mobile First — the right approach: start with mobile, then add complexity for larger screens via min-width.
Common breakpoints
| Name | min-width | For |
|---|---|---|
| sm | 640px | Large phones |
| md | 768px | Tablets |
| lg | 1024px | Laptops |
| xl | 1280px | Large monitors |
Fluid typography with clamp()
/* clamp(minimum, ideal, maximum) */
h1 {
font-size: clamp(1.75rem, 5vw, 3rem);
/* on phone: 1.75rem, on desktop: 3rem, in between — proportional */
}vw = 1% of viewport width. 5vw = 5% of screen width.
Mobile First + three breakpoints. The entire layout adapts from 1 to 3 columns with minimal code.
Check responsiveness in the browser DevTools: Toggle Device Toolbar button (Ctrl+Shift+M in Chrome). You can pick a specific phone or resize the width manually.