CSS中视口相关的4个单位vh、vw、vmin、vmax

时间：6年前阅读：5096

　　视口相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，他们都会相应地缩放。然而，当根元素的overflow值为auto时，任何滚动条会假定不存在。

　　关于视口相关的单位有vh、vw、vmin、vmax4个单位

　　兼容性:IE8-不支持，IOS7.1-不支持，android4.3-不支持(对于vmax，所有IE浏览器都不支持)

　　[注意]黑莓错误的将其相对于视觉视口来计算；而safari奇怪地相对于html元素来计算，如果html中增加了内容，这两个单位也会发生变化

　　布局视口高度的 1/100

　　布局视口宽度的 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,我们将及时处理。

微信扫码关注

更新实时通知

CSS中视口相关的4个单位vh、vw、vmin、vmax

网友评论