1.9 — CSS Responsive Design: Quick Revision
Compact cheat sheet. Print-friendly.
How to use this material (instructions)
- Skim top-to-bottom in one pass before interviews or exams.
- If a row feels fuzzy — reopen the matching lesson:
README.md → 1.9.a…1.9.g.
- Drills —
1.9-Exercise-Questions.md.
- Polished answers —
1.9-Interview-Questions.md.
1.9.a Mobile-First Strategy
Core Idea
Base CSS (no query) = mobile styles
@media (min-width: …) = add complexity for wider viewports
| Approach | Query type | Mental model |
|---|
| Mobile-first | min-width | "What do I add?" |
| Desktop-first | max-width | "What do I remove?" |
Touch Targets
| Standard | Minimum size |
|---|
| Google / Material | 48 × 48 px |
| WCAG 2.5.8 (AAA) | 44 × 44 px |
Performance
- Less CSS parsed on mobile (complex rules inside queries phones don't match)
- Fewer overrides = smaller file = faster first paint
1.9.b Media Queries
Syntax
@media <type>? and (<feature>: <value>) { … }
Media Types
| Type | Target |
|---|
all | Everything (default) |
screen | Screens |
print | Printed pages |
Key Media Features
| Feature | Example |
|---|
min-width / max-width | (min-width: 768px) |
orientation | portrait / landscape |
prefers-color-scheme | light / dark |
prefers-reduced-motion | reduce / no-preference |
hover | hover / none |
pointer | fine / coarse / none |
Combining
| Operator | Meaning |
|---|
and | All must be true |
, | Any can be true (OR) |
not | Negates entire query (to comma) |
Level 4 Range Syntax
@media (min-width: 768px) and (max-width: 1023px) { … }
@media (768px <= width < 1024px) { … }
Reduced Motion Pattern
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
1.9.c Breakpoint Planning
Common Breakpoints
| Name | Min-width | Typical |
|---|
| xs | 0 | Small phones |
| sm | 480px | Large phones |
| md | 640px | Tablets |
| lg | 1024px | Laptops |
| xl | 1280px | Desktops |
| 2xl | 1536px | Ultra-wide |
Rules
- Content-driven > device-driven — add breakpoint where layout breaks
- Major breakpoints = layout change; Minor = spacing tweak
- Cap at 3–5 for most projects
- Fluid techniques first —
auto-fit, clamp() can eliminate breakpoints
Zero-Breakpoint Grid
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
1.9.d Responsive Images
object-fit Values
| Value | Behavior |
|---|
fill | Stretch to fill (distorts) |
contain | Fit inside (may show gaps) |
cover | Cover box (may crop) |
none | Natural size |
scale-down | Smaller of contain / none |
srcset vs <picture>
| srcset + sizes | <picture> |
|---|
| Purpose | Resolution switching | Art direction |
| Who decides | Browser | Author |
Format Priority
AVIF → WebP → JPEG
Image Checklist
1. Right format (AVIF > WebP > JPEG)
2. Right size (≤ display width × DPR)
3. Compress (80% quality for lossy)
4. srcset + sizes
5. loading="lazy" (below fold)
6. width + height or aspect-ratio (CLS)
7. fetchpriority="high" (hero/LCP)
Aspect Ratio
.thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
1.9.e Fluid Typography
The Formula
font-size: clamp(MIN, PREFERRED, MAX);
h1 { font-size: clamp(1.5rem, 2.5vw + 0.5rem, 3rem); }
How It Works
max ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
╱‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
preferred ╱
╱
min ─ ─ ─
small ──────────── viewport ──────────── large
Accessibility Rule
- Always use
rem for min and max — respects user font-size settings
- Never
px bounds on text
Fluid Type Scale Example
:root {
--text-sm: clamp(0.8rem, 0.17vw + 0.75rem, 0.875rem);
--text-base: clamp(1rem, 0.34vw + 0.91rem, 1.125rem);
--text-lg: clamp(1.25rem, 0.56vw + 1.08rem, 1.5rem);
--text-xl: clamp(1.563rem, 0.89vw + 1.3rem, 2rem);
--text-2xl: clamp(1.953rem, 1.36vw + 1.56rem, 2.75rem);
}
Line Length
.prose { max-width: 65ch; }
1.9.f Spacing & Rhythm
4px Base Spacing Scale
| Token | rem | px |
|---|
--space-1 | 0.25rem | 4 |
--space-2 | 0.5rem | 8 |
--space-3 | 0.75rem | 12 |
--space-4 | 1rem | 16 |
--space-6 | 1.5rem | 24 |
--space-8 | 2rem | 32 |
--space-12 | 3rem | 48 |
--space-16 | 4rem | 64 |
Key Patterns
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); }
Responsive Spacing
.section { padding-block: clamp(2rem, 5vw, 6rem); }
Golden Rule
Use gap instead of margin on children. No :last-child hacks. No magic numbers.
1.9.g CSS Frameworks
Categories
| Category | Example | Approach |
|---|
| Utility-first | Tailwind | Small classes composed in HTML |
| Component-based | Bootstrap | Pre-designed components, class API |
| Hybrid | Foundation | Mix of both |
When to Use
| Scenario | Choice |
|---|
| Prototype / MVP | Framework |
| Unique brand / marketing | Custom CSS |
| Learning CSS | Custom CSS first |
| Large team, admin dashboard | Framework |
| Design system / component library | Custom or token library |
Quick Comparison
| Bootstrap | Tailwind |
|---|
| Pre-built components | 50+ | None (compose your own) |
| Prod CSS (purged) | ~50 KB | ~10–15 KB |
| Design uniqueness | Low by default | High |
| JS included | Yes | No |
Quick-Fire Recall
Mobile-first → min-width queries, progressive enhancement
Media features → width, color-scheme, reduced-motion, hover, pointer
Breakpoints → content-driven, 3–5 max, fluid first
Images → srcset (resolution) vs <picture> (art direction)
→ AVIF > WebP > JPEG, lazy + aspect-ratio
Fluid type → clamp(rem-min, vw + rem, rem-max)
Spacing → 4px base, tokens, gap, no magic numbers
Frameworks → utility-first vs component-based, purge unused CSS
Navigation: ← 1.9 Overview · 1.9-Exercise-Questions · 1.9-Interview-Questions