Fluid Sizes

Fluid Sizes: calc(), min() and max(): Math in CSS, Fluid Type and Spacing with clamp().

Updated

  1. calc(), min() and max(): Math in CSS (Journeyman): calc() does arithmetic with sizes, even mixing units such as 100% and 2rem, and min() and max() pick the smaller or the larger of two sizes, so a box fits a phone and a wide screen with no media query at all.
  2. Fluid Type and Spacing with clamp() (Journeyman): clamp() keeps a size between a minimum and a maximum and lets it grow smoothly in between, so headings and spacing fit a phone and a wide screen without a single breakpoint, while still following the reader's zoom.