VW FTW

If you haven't used CSS viewport units like vw and vh yet, you're missing out on some really fun ways to solve responsive problems. A vw and a vh are equal to 1% of the viewport width and height, respectively.

• use vw for padding to scale your padding responsively without having to use @media breakpoints
• set a font-size in vw to allow fonts to scale with the viewport (the TODAY I LEARNED page heading is set using vw)
• use vw for box-shadow to let your box-shadows scale down with the page (also a feature of the TIL site)

For more sweet viewport unit tricks, check out Rye Mason's post on the Hashrocket blog.

Tweet