What is CSS Viewport Units?
CSS3 Viewport units: vw, vh, vmin, vmax.
CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. It is relevant to bring up now, because it's shipping in Chrome 20
One unit on any of the three values is 1% of the viewport axis. "Viewport" == browser window size == window object. If the viewport is 40cm wide, 1vw == 0.4cm.
Viewport unit syntax
In brief, the available new units are as follows:
- 1vw: 1% of viewport width
- 1vh: 1% of viewport height
- 1vmin: 1vw or 1vh, whatever is smallest
- 1vmax: 1vw or 1vh, whatever is largest
Note that IE9 supports the old syntax for vmin — vm, but not for font-size. Webkit-based browsers that support it do so, but not dynamically — refresh the browser window if you see no change upon resizing the viewport.
Video for Css Viewpot
