Jason Knight
Nov 2, 2021

--

Given that one should have a max-width so that large displays don't have paragraphs too wide to follow, not sure that makes sense... entirely...

but really min, max, and clamp are our friends.

font-size:clamp(1.5rem, 5vw, 4rem);

padding:min(1.5rem, 3vw);

etc, etc. Set what looks good for your larger displays, then have it shrink down to next to nothing for smaller ones.

The new restriction / range functions in CSS give vw a new lease on life, reducing how much time we waste on media queries. Now rather than multiple queries, I can just have the one at around 20-24em to strip off outermost padding/borders.

--

--

Jason Knight
Jason Knight

Written by Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse

No responses yet