CSS Viewport units, vh, vw - responsive Webdesign

This tutorial is about a very useful CSS unit. The viewport units are giving you the possibility, to make your webpage responsive to the viewport of the device, it is viewed with.

In this tutorial we are talking about two of these units: vw, vh

vw: 1/100 (1%) of the current viewport width
vh: 1/100 (1%) of the current viewport heigth

To get a more practical idea of these units, this tutorial will show you an easy example, using these units.

As always, I am using the JSBin webapp, to get the results of your coding instantly.

For further details have a look at these great tutorials:

For a more general overview about all the units in CSS, look at:

My CSS floating tutorial (just german):

Looking forward for your comments!