📜 ⬆️ ⬇️

Webkit engine supports new units of measurement - vh, vw and vmin

These units allow you to set object sizes relative to the browser window. Size is calculated as a percentage of height (vh), width (vw), or the minimum of these two values ​​(vmin). Unlike specifying dimensions in percent, vh, vw and vmin are always tied to the size of the window, not the container of the current block. Until now, they were supported only by Internet Explorer 9+ (however, IE instead of the unit specified in the standard vmin uses the designation “vm”).

So, this example:
<!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> 

now only works in IE9 +. The inclusion of vh and vw units in Webkit means that they will soon be available in Safari and Chrome. And there, you see, Mozilla with the Opera will catch up, and the life of the layout designer will be a little easier.

PS: More details on vh and vw.

')

Source: https://habr.com/ru/post/139631/


All Articles