CSS中视口相关的4个单位vh、vw、vmin、vmax
视口相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，他们都会相应地缩放。然而，当根元素的overflow值为auto时，任何滚动条会假定不存在。
关于视口相关的单位有vh、vw、vmin、vmax4个单位
兼容性:IE8-不支持，IOS7.1-不支持，android4.3-不支持(对于vmax，所有IE浏览器都不支持)
[注意]黑莓错误的将其相对于视觉视口来计算；而safari奇怪地相对于html元素来计算，如果html中增加了内容，这两个单位也会发生变化
vh
布局视口高度的 1/100
vw
布局视口宽度的 1/100
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{margin: 0;} .box{ /* 实现与屏幕等高的效果 */ height: 100vh; background-color: lightblue; } </style> </head> <body> <div class="box"></div> </body> </html> 
vmin
布局视口高度和宽度之间的最小值的 1/100
/*类似于contain效果*/
.box{
height: 100vmin;
width: 100vmin;
}
vmax
布局视口高度和宽度之间的最大值的 1/100
/*类似于cover效果*/
.box{
height: 100vmax;
width: 100vmax;
}
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知