In your wanderings across the web, you may have seen some sites with typography that scales beautifully as you resize your browser window. Or full-screen sections that remain that way no matter how big the viewport gets.
Here’s a few examples from CodePen:
Here's a simple example I built in Webflow: http://vh-and-vw.webflow.io/
Now the “old-school” way of setting element and font sizes was with pixel-based widths and heights. Try using those units nowadays and you’ll see a lot of shaking heads.
To achieve real responsiveness, you need to start thinking in relative units and using vh and vw style settings to control the widths and heights of our elements no matter the viewport size.
You can also use percentage-based units, but keep in mind that they’re based on the parent element, while vh and vw style units are based on the viewport.
vw and vh are length units representing 1% of the viewport size for viewport width (vw) and height (vh), respectively.
Wondering what browsers support vh and vw? Check can I use? for the latest!
To use vh and vw units in Webflow, just type “Nvh” or “Nvw” (where “N” represents the percentage of the viewport you’d like to cover) into any width or height field.
So to cover 100% of the viewport, you’d set 100% for the width and 100vh for the height. To cover half of the viewport height, you’d set a height of 50vh. You may be asking, why not use 100vw for the width, that is because the vw style doesn't take into account the scrollbar width and could cause side scrolling on browsers with wide scroll bars such as Internet Explorer.
You can also use the vh and vw as font sizes to make text scale with the browser window. This is great way to keep your content sized just right no matter the viewport dimensions.
Master the basics of flexbox in 28 increasingly challenging — and fun!— levels, without writing a line of code.
In your inbox, every other week. And unsubscribe in a click, if you want.