Responsive web design makes layouts and dimensions respond to browser-window size, device, viewport, and user settings. It favors solutions that remain useful across changing circumstances rather than fixed dimensions such as an 800 px width. section 2.1.1
Build responsiveness from a few durable principles:
- Use relative units so font sizes, padding, and borders can scale with the page’s base font size. section 2.1.1 section 2.3.2
- Use media queries to redefine the root font size at useful breakpoints, allowing many em- and rem-based components to scale together. section 2.3.2
- Place side-by-side content beside itself only when there is enough room; let cramped content stack and fill the narrow screen. section 7.2.3
- Choose breakpoints from the content’s behavior rather than applying one universal set of screen widths. section 7.2.3
Scaling a panel and rearranging columns
A panel can use a small root font size by default, then scale to 1em at 800 px and 1.15em at 1,200 px. Separately, a main content area can become a three-column CSS Grid at 650 px; below that breakpoint, normal document flow stacks the items. section 2.3.2 section 7.2.3
Figure 2.8 A responsive panel as seen on different screen sizes: 300 px (top left), 800 px (top right), and 1,440 px (bottom)
Compare the same responsive panel at 300 px, 800 px, and 1,440 px to see how its scale changes with screen width. section 2.3.2
