Phase 4 — Responsive & Modern
#13 Responsive design
media queries, mobile-first, viewport
What is responsive design?
Responsive design makes your website adapt to any screen size — from phones to wide desktop monitors. The key principles are: fluid layouts, flexible images, and media queries.
The viewport meta tag
viewport
<!-- Required in every responsive page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">Media queries
Mobile-first media queries
/* Base styles for mobile */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Tablet (768px+) */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop (1024px+) */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}Fluid typography
clamp() for fluid font sizes
h1 {
/* Min: 1.5rem, Preferred: 4vw, Max: 3rem */
font-size: clamp(1.5rem, 4vw, 3rem);
}
p {
font-size: clamp(0.9rem, 1.5vw, 1.125rem);
}Responsive images
Images that adapt
/* Basic responsive image */
img {
max-width: 100%;
height: auto;
}
/* Art direction with picture */
<picture>
<source media="(min-width: 1024px)" srcset="hero-large.jpg">
<source media="(min-width: 768px)" srcset="hero-medium.jpg">
<img src="hero-small.jpg" alt="Hero image">
</picture>Responsive units
Relative units
/* rem: relative to root font-size */
padding: 1.5rem; /* 24px if root = 16px */
/* em: relative to parent font-size */
margin-bottom: 1em; /* 1x current font-size */
/* vw/vh: viewport width/height */
.hero { height: 100vh; } /* Full viewport height */
/* %: relative to parent */
.sidebar { width: 25%; }Your turn
Try the responsive design commands below:
terminal — browser