关于css3新单位vh、vw的记录
2018-12-24 本文已影响0人
Front_小伪
一、概念
把视口的width、height平均分成100份。1vw就是一份的width，同理1vh就是一份的height。
二、实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vw、vh Demo</title>
<style>
* {
padding:0;
margin:0;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
.orange {
background: orange;
}
.vw25 {
width:25vw;
}
.vw50 {
width: 50vw;
}
.vw100 {
width: 100vw;
}
.vh25 {
height: 25vh;
}
.vh50 {
height: 50vh;
}
.vh100 {
height: 100vh;
}
.fl {
float: left;
}
.clearfix {
clear: both;
}
.clearfix::after {
clear: both;
content:'';
display: block;
}
.flexBlock {
display: flex;
justify-content: center;
align-items: center;
color:#fff;
font-size: 16px;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="vw25 vh50 red fl flexBlock">
25vw 50vh 效果图
</div>
<div class="vw25 vh50 green fl flexBlock">
25vw 50vh 效果图
</div>
<div class="vw25 vh50 red fl flexBlock">
25vw 50vh 效果图
</div>
<div class="vw25 vh50 green fl flexBlock">
25vw 50vh 效果图
</div>
</div>
<div class="clearfix">
<div class="vw50 vh25 fl blue flexBlock">
50vw 25vh 效果图
</div>
<div class="vw50 vh25 fl orange flexBlock">
50vw 25vh 效果图
</div>
</div>
<div class="vw100 vh25 red flexBlock">
100vw 25vh 效果图
</div>
<div class="clearfix">
<div class="vw50 vh100 fl blue flexBlock">
50vw 100vh 效果图
</div>
<div class="vw50 vh100 fl green flexBlock">
50vw 100vh 效果图
</div>
</div>
</body>
</html>
效果如下:
三、兼容性（Can I Use 查询）
兼容性
