robohash image acting as kam's profile photo

Tip 005 - Viewport Units


Yet another CSS unit that solves problems we didn't know we had: vw for "viewport width" and vh for "viewport height".

1vw is going to equal 1% of however wide the viewport is. Likewise, 1vh equals 1% of however tall the viewport is. Note that you don't have to use vw just for widths, and you don't have to use vh for just heights. You can mix and match the two to get some interesting layouts. Here's some examples from Jen Simmons:

These are relative units, which means they won't always be the same size, as you can't always predict how the window will be sized, or which orientation it's in. While relative units look like a CSS stick-in-the-mud, they're actually lifesavers when used right. Example incoming... tomorrow.

(cliffhangers woo!)


Have you written a reply on another site? Put the URL here: