In Chrome Canary earned new units of measurement CSS - vh, vw and vmin

In the developer version of Google Chrome (at the time of writing this article - Chrome 20), there appeared support for new units of CSS measurement - vh, vw and vmin, which a couple of months ago were implemented in the Webkit engine. Prior to that, they only worked in Internet Explorer 9 and 10 versions. These units define the size of objects relative to the height or width of the window. Unlike percentages, they are always tied to the browser window, and not to the container of the current block. 1vh is 1% of the height of the window, 1vw is 1% of the width, 1vmin is the smaller of these two values.

Examples:

 h1 { font-size: 4.2vw; } header { height: 15vh; } #someDiv { padding: 2vmin; } 

Features of use

When the browser window is resized, the dimensions of the block elements specified in vh, vw or vmin change in real time, and the font sizes change only after redrawing. In the case of a change in scale (Ctrl + or Ctrl-), the font size changes, but the block sizes do not. Internet Explorer behaves the same way.

In IE, instead of “vmin”, the name “vm” is used (support for these units appeared in IE for quite some time, and at that time it was “vm” in the W3C specification, not “vmin”).
')
Unlike IE, Chrome Canary does not yet understand the new units in the border property.

Links to the topic: Article on CSS Tricks , article on Habré .