- Fluid grids — use %, fr and minmax() instead of fixed pixel widths
- Flexible images — max-width: 100%; height: auto;
- Breakpoints — media queries at common widths (e.g. 640px, 768px, 1024px)
- Mobile-first — write base styles for small screens, layer on complexity for larger ones
Responsive Layout Design
Building layouts that adapt gracefully across phone, tablet and desktop screen sizes.