В девелоперской версии Google Chrome (на момент написания статьи — Chrome 20) появилась поддержка новых единиц измерения CSS — vh, vw и vmin, которые пару месяцев назад были реализованы в движке Webkit. До этого они работали только в Internet Explorer 9-й и 10-й версий. Эти единицы задают размеры объектов относительно высоты или ширины окна. В отличие от процентов, они всегда привязаны именно к окну браузера, а не к контейнеру текущего блока.
Примеры:
При изменении размеров окна браузера размеры блочных элементов, указанные в vh, vw или vmin, меняются в реальном времени, а размеры шрифта — только после перерисовки. В случае изменения масштаба (Ctrl+ или Ctrl-) размер шрифта меняется, а размеры блоков — нет. Internet Explorer ведёт себя точно так же.
В IE вместо «vmin» используется название «vm» (поддержка этих единиц появилась в IE довольно давно, и в те времена в спецификации W3C было именно «vm», а не «vmin»).
В отличие от IE, Chrome Canary пока не понимает новые единицы в свойстве border.
Ссылки в тему: Статья на СSS Tricks, статья на Хабре.
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, статья на Хабре.