OnlineCBT
Make a value fluid within useful limits
min, max and clamp let CSS compare compatible calculated values. They are useful for fluid text and container sizing without many closely spaced breakpoints. Keep the minimum and maximum tied to readability and layout constraints.
.article { width: min(90%, 65rem); margin-inline: auto; }
.hero-title { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.section { padding-inline: max(1rem, 4vw); }min chooses the smaller result: the article never exceeds either 90% of its containing block or 65rem. max chooses the larger, giving section padding a floor. clamp bounds the preferred middle expression between a minimum and maximum.
Reason through clamp
In the heading example, a small viewport uses at least 1.75rem. The preferred expression grows with viewport width. A large viewport stops growth at 3.5rem. Adding a rem component avoids making the text depend solely on viewport width, but you must still test user text resizing and browser zoom.
Units and syntax
Compatible length expressions can mix units inside these math functions. Operators such as + and - need appropriate whitespace. Do not put a smaller maximum than minimum and assume the browser will guess your intended design; write a coherent range and test it.
Fluid does not mean overflow-proof
A clamp-controlled heading can still overflow because of an unbreakable word, a fixed-width child or a narrow container. Use sensible wrapping and allow natural height. Test the longest real title rather than a short placeholder.
Exercises
- Create a title that scales from 1.5rem to 3rem and inspect intermediate widths.
- Use min to limit a card's width while leaving a viewport margin.
- Compare max-based padding with a rigid 16px padding at wide sizes.
- Zoom to 200% and verify no text is clipped by a fixed-height wrapper.
हिन्दी संकेत: clamp में minimum, preferred और maximum तीनों की भूमिका अलग है। Fluid sizing को real content और zoom के साथ जांचें।
