1
HTML/CSSAdvanced#css#responsive
HTML/CSSAdvanced#css#responsive#units
What is the difference between em/rem and viewport-relative clamp() for fluid typography?
Fixed rem sizes don't scale between breakpoints without media queries, requiring several explicit rules. clamp(min, vw-based-preferred, max) scales smoothly and continuously with viewport width between the defined bounds, reducing the number of breakpoints needed.
Example
/* Old approach: multiple breakpoints */
h1 { font-size: 1.5rem; }
@media (min-width: 768px) { h1 { font-size: 2.5rem; } }
/* Fluid approach */
h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }