Today I Learned

A Hashrocket project

Ready to join Hashrocket? Find Openings here and apply today.

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.