Blog

Responsive Design: Mobile-First, Media Query Range Syntax, Fluid Typography with clamp() and User Preferences

A responsive page is written mobile-first, its breakpoints are chosen from the content in rem, and font sizes go inside clamp() as the sum of a rem and a vw; a heading that uses only vw does not grow at all under zoom. On Bookstore we measure, in Chromium and WebKit, the range syntax, why rem in a media query ignores the page's root font size, zoom, prefers-reduced-motion, prefers-contrast, prefers-color-scheme and hover/pointer.