This tutorial is about a very useful CSS unit. The CSS viewport unit is 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 viewport 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:

http://blog.teamtreehouse.com/new-viewport-relative-units

https://dev.opera.com/articles/css-viewport-units/

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

https://css-tricks.com/the-lengths-of-css/

My CSS floating tutorial (just german):

http://bestinnovations.de//float-und-clear-richtig-positionieren-mit-css/

Looking forward for your comments!

Your web.studio