- PVSM.RU - https://www.pvsm.ru -
В девелоперской версии Google Chrome (на момент написания статьи — Chrome 20) появилась поддержка новых единиц измерения CSS — vh, vw и vmin, которые около месяца назад были реализованы [1] в движке Webkit. До этого они работали только в Internet Explorer 9-й и 10-й версий. Эти единицы [2] задают размеры объектов относительно высоты или ширины окна. В отличие от процентов, они всегда привязаны именно к окну браузера, а не к контейнеру текущего блока. 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 [3], статья на Хабре [4].
Автор: ilya42
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/6634
Ссылки в тексте:
[1] были реализованы: http://habrahabr.ru/post/139631/
[2] единицы: http://www.w3.org/TR/css3-values/#viewport-relative-lengths
[3] Статья на СSS Tricks: http://css-tricks.com/viewport-sized-typography/
[4] статья на Хабре: http://habrahabr.ru/post/126863/
Нажмите здесь для печати.