В движке Webkit реализована поддержка новых единиц измерения — vh, vw и vmin

в 16:55, , рубрики: css, viewport relative length, vmin, webkit, единицы измерения, метки: , , , ,

Эти единицы позволяют задавать размеры объектов относительнно окна браузера. Размер считается в процентах от высоты (vh), ширины (vw) или минимального из этих двух значений (vmin). В отличие от указания размеров в процентах, vh, vw и vmin всегда привязяаны к размерам окна, а не контейнера текущего блока. До сих пор их поддерживал только Internet Explorer 9+ (впрочем, IE вместо указанной в стандарте единицы vmin использует обозначение «vm»).

Так, этот пример:

<!doctype html> <head> <style> * { margin:0; padding:0; border:0; }  #red  { 	background:red; 	height:100vh; 	width:100vw; } </style> </head> <body> 	<div id="red"> 	</div> </body> </html> 

сейчас работает только в IE9+. Включение единиц измерения vh и vw в Webkit означает, что вскоре они будут доступны в Safari и Chrome. А там, глядишь, Мозилла с Оперой подтянутся, и жизнь верстальщика станет ещё немного легче.

P.S.: Ещё немного подробностей на тему vh и vw.

Автор: ilya42


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js