В Chrome Canary заработали новые единицы измерения CSS — vh, vw и vmin

В девелоперской версии Google Chrome (на момент написания статьи — Chrome 20) появилась поддержка новых единиц измерения CSS — vh, vw и vmin, которые пару месяцев назад были реализованы в движке Webkit. До этого они работали только в Internet Explorer 9-й и 10-й версий. Эти единицы задают размеры объектов относительно высоты или ширины окна. В отличие от процентов, они всегда привязаны именно к окну браузера, а не к контейнеру текущего блока. 1vh равен 1% высоты окна, 1vw — 1% ширины, 1vmin — меньшему из этих двух значений.

Примеры:

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

Особенности использования

При изменении размеров окна браузера размеры блочных элементов, указанные в vh, vw или vmin, меняются в реальном времени, а размеры шрифта — только после перерисовки. В случае изменения масштаба (Ctrl+ или Ctrl-) размер шрифта меняется, а размеры блоков — нет. Internet Explorer ведёт себя точно так же.

В IE вместо «vmin» используется название «vm» (поддержка этих единиц появилась в IE довольно давно, и в те времена в спецификации W3C было именно «vm», а не «vmin»).

В отличие от IE, Chrome Canary пока не понимает новые единицы в свойстве border.

Ссылки в тему: Статья на СSS Tricks, статья на Хабре.