The Viewport Meta Tag
Without this tag, mobile browsers zoom out to fit a 980px-wide page onto a 375px screen. The viewport tag tells the browser to use the actual device width:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Media Queries
Media queries apply CSS only when a condition is true (usually screen width). Mobile-first approach: write base styles for small screens, then use min-width breakpoints to enhance for larger screens.
/* Mobile first (base styles) */
.grid { grid-template-columns: 1fr; }
/* Tablet and up */
@media (min-width: 600px) {
.grid { grid-template-columns: 1fr 1fr; }
}
/* Desktop and up */
@media (min-width: 900px) {
.grid { grid-template-columns: 1fr 1fr 1fr; }
}
Fluid Units
Use relative units for truly fluid design: % (relative to parent), vw/vh (viewport width/height), rem (relative to root font size). Avoid px for widths — prefer max-width with % or 100%.
Responsive images: img { max-width: 100%; height: auto; } — prevents images from overflowing their containers.