Responsive Design

Building pages that adapt from phone to desktop without separate versions.

Foundation 25 minutes Prerequisites: Layout: Flexbox and Grid

Key ideas

Mobile-first: write CSS for narrow screens first, then add media queries for wider ones.
Relative units: rem, %, vw/vh instead of fixed pixels.
Fluid images: max-width: 100%; height: auto.
Breakpoints: a few (e.g. 640, 1024, 1280) chosen by content, not by device.

.card { padding: 12px; }
@media (min-width: 640px) {
  .card { padding: 24px; }
}