Q21: How do clamp(), min(), and max() functions enable fluid responsive design?
clamp(MIN, VAL, MAX): Constrains a value within lower and upper bounds.min(VAL1, VAL2): Selects the smallest value.max(VAL1, VAL2): Selects the largest value. They enable fluid typography scaling without writing explicit media queries.
Fluid Responsive Typography
h1 {
/* Minimum: 2rem, Preferred: 5vw, Maximum: 4rem */
font-size: clamp(2rem, 5vw, 4rem);
}💡 Heading text scales dynamically with viewport width, constrained safely between 2rem and 4rem.
Key Takeaways
clamp()sets fluid values that scale between minimum and maximum bounds.- Reduces reliance on explicit
@mediaquery breakpoint rules.
Knowledge Check
What is the computed output of font-size: clamp(16px, 10px, 24px)?