视窗相关单位vh，vw使用
2019-07-06 本文已影响0人
我爱罗是个程序猿
在一个强制解决横屏的解决方案里看到vh,vw这两个单位，发现居然没见过，于是乎查了一下资料，发现这东西很早就有了，感慨自己还有很多东西要学啊。
1.兼容性
不清楚CSS兼容性的同学可以在这里查询：http://www.caniuse.com/。
兼容.png
2.vh，vw介绍
vw,vh是css3中提供的新单位，就是viewport视窗进行计算的单位，简单说就是相对于浏览器视窗大小（可视区域）。
-
vh：相对于视窗的高度，1vh=1%浏览器高度
-
vw：相对于视窗的宽度，1wh=1%浏览器宽度
3.举个栗子
比如常见的在页面上居中一个div，代码如下：
.box{
background-color: blueviolet;
height: 300px;
width: 400px;
position: absolute;
top:50vh;
left: 50vw;
margin-top: -150px;
margin-left: -200px
}
<body>
<div class="box"></div>
</body>
效果如下：
效果.png
其实还有很多其他用法，如在移动端，遮罩层，弹窗，显示大图限制最大尺寸，这里只是抛个砖，大家可以多多探索。
干一行，爱一行，学到老，活到老~
