markberning
12/18/2017 - 3:19 AM

CSS Viewport Units

These new units are vh for viewport height, vw for viewport width, as well as vmin and vmax, which work out to be whichever is the maximum or minimum of the two above. We can use these new units to size our typography relative to the viewport, and when we do that, we end up with type that scales continuously with the size of our viewport.

css-viewport-units.css
content_copyfile_download
vh - viewport height
vw - viewport width
vmin - viewport min
vmax - viewport max

1 viewport unit = 1% of the viewport axis
So, 1vh = 1% of the total viewport height
And, 1vmin = 1vh or 1vw, whichever is smaller
And, 1vmax = 1vh or 1vw, whichever is larger

setting font-size: 3vw; = setting one char to 3% of the viewport width