Pages That Fit Any Screen

Pages That Fit Any Screen: Responsive Design and the Viewport, Media Queries and Breakpoints, Mobile First: Start Small, Then Add Room.

Updated

  1. Responsive Design and the Viewport (Apprentice): A responsive page fits whatever screen it's on, and it starts with one line in the head, the viewport line, plus knowing what breaks on a phone and how to see it with device mode.
  2. Media Queries and Breakpoints (Journeyman): A media query applies CSS only when a condition is true, such as a screen at least 40rem wide, a dark theme or a mouse that can hover, and breakpoints go where your content needs them.
  3. Mobile First: Start Small, Then Add Room (Journeyman): Mobile-first CSS writes the phone layout as the base styles and uses min-width media queries to add columns as the screen grows, which takes less CSS than shrinking a desktop layout down.