认识VW和VH
vw和vh是相对单位，相对于视口的尺寸计算结果。
vw：viewport width
1vw = 1/100视口宽度
vh：viewport height
1vh = 1/100视口高度
使用vw和vh可以快速实现等比缩放的网页效果。
vw和vh相对于rem适配的优点：
不需要引入任何js文件，也不需要在vscode配置文字大小。
注意：vw和vh不会同时去用，一般工作中的布局使用vw即可（因为移动端的设计图是基于视口宽度375px去设计的）
使用px to vw插件即可快速把px转换为vw单位（ctrl+a全选，再alt+a转换即可）
注意：使用px to vw插件的时候记得把px to rem插件禁用了，不然会快捷键冲突。
案例：bilibili
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bilibili课堂版</title>
<link rel="stylesheet" href="./fonts/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header>
<!-- 快捷导航部分 -->
<div class="shortcut">
<!-- logo -->
<h1>
<a href="#">
<i class="iconfont Navbar_logo"></i>
</a>
</h1>
<!-- 右边部分 -->
<div class="right">
<a href="#">
<i class="iconfont ic_search_tab search"></i>
</a>
<a href="#">
<img src="./images/login.png" class="login" alt="">
</a>
<a href="#">
<img src="./images/download.png" alt="" class="download">
</a>
</div>
</div>
<!-- 导航栏部分 -->
<div class="nav">
<ul>
<li class="active">首页</li>
<li>动画</li>
<li>番剧</li>
<li>国创</li>
<li>音乐</li>
</ul>
<i class="iconfont general_pulldown_s"></i>
</div>
</header>
<!-- 视频列表 -->
<div class="vedio_list">
<ul>
<li>
<a href="#">
<div class="top">
<img src="./images/1.jpg" alt="">
<!-- 遮罩层 -->
<div class="mask">
<div class="play">
<i class="iconfont icon_shipin_bofangshu"></i>36.9万
</div>
<div class="review">
<i class="iconfont icon_shipin_danmushu"></i>3347
</div>
</div>
</div>
<p class="ellipsis-2">打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？打破次元壁！</p>
</a>
</li>
<li>
<a href="#">
<div class="top">
<img src="./images/1.jpg" alt="">
<!-- 遮罩层 -->
<div class="mask">
<div class="play">
<i class="iconfont icon_shipin_bofangshu"></i>36.9万
</div>
<div class="review">
<i class="iconfont icon_shipin_danmushu"></i>3347
</div>
</div>
</div>
<p class="ellipsis-2">打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？打破次元壁！</p>
</a>
</li>
<li>
<a href="#">
<div class="top">
<img src="./images/1.jpg" alt="">
<!-- 遮罩层 -->
<div class="mask">
<div class="play">
<i class="iconfont icon_shipin_bofangshu"></i>36.9万
</div>
<div class="review">
<i class="iconfont icon_shipin_danmushu"></i>3347
</div>
</div>
</div>
<p class="ellipsis-2">打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？打破次元壁！</p>
</a>
</li>
<li>
<a href="#">
<div class="top">
<img src="./images/1.jpg" alt="">
<!-- 遮罩层 -->
<div class="mask">
<div class="play">
<i class="iconfont icon_shipin_bofangshu"></i>36.9万
</div>
<div class="review">
<i class="iconfont icon_shipin_danmushu"></i>3347
</div>
</div>
</div>
<p class="ellipsis-2">打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？打破次元壁！</p>
</a>
</li>
<li>
<a href="#">
<div class="top">
<img src="./images/1.jpg" alt="">
<!-- 遮罩层 -->
<div class="mask">
<div class="play">
<i class="iconfont icon_shipin_bofangshu"></i>36.9万
</div>
<div class="review">
<i class="iconfont icon_shipin_danmushu"></i>3347
</div>
</div>
</div>
<p class="ellipsis-2">打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？打破次元壁！</p>
</a>
</li>
<li>
<a href="#">
<div class="top">
<img src="./images/1.jpg" alt="">
<!-- 遮罩层 -->
<div class="mask">
<div class="play">
<i class="iconfont icon_shipin_bofangshu"></i>36.9万
</div>
<div class="review">
<i class="iconfont icon_shipin_danmushu"></i>3347
</div>
</div>
</div>
<p class="ellipsis-2">打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？打破次元壁！</p>
</a>
</li>
<li>
<a href="#">
<div class="top">
<img src="./images/1.jpg" alt="">
<!-- 遮罩层 -->
<div class="mask">
<div class="play">
<i class="iconfont icon_shipin_bofangshu"></i>36.9万
</div>
<div class="review">
<i class="iconfont icon_shipin_danmushu"></i>3347
</div>
</div>
</div>
<p class="ellipsis-2">打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？打破次元壁！</p>
</a>
</li>
<li>
<a href="#">
<div class="top">
<img src="./images/1.jpg" alt="">
<!-- 遮罩层 -->
<div class="mask">
<div class="play">
<i class="iconfont icon_shipin_bofangshu"></i>36.9万
</div>
<div class="review">
<i class="iconfont icon_shipin_danmushu"></i>3347
</div>
</div>
</div>
<p class="ellipsis-2">打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？打破次元壁！</p>
</a>
</li>
<li>
<a href="#">
<div class="top">
<img src="./images/1.jpg" alt="">
<!-- 遮罩层 -->
<div class="mask">
<div class="play">
<i class="iconfont icon_shipin_bofangshu"></i>36.9万
</div>
<div class="review">
<i class="iconfont icon_shipin_danmushu"></i>3347
</div>
</div>
</div>
<p class="ellipsis-2">打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？打破次元壁！</p>
</a>
</li>
<li>
<a href="#">
<div class="top">
<img src="./images/1.jpg" alt="">
<!-- 遮罩层 -->
<div class="mask">
<div class="play">
<i class="iconfont icon_shipin_bofangshu"></i>36.9万
</div>
<div class="review">
<i class="iconfont icon_shipin_danmushu"></i>3347
</div>
</div>
</div>
<p class="ellipsis-2">打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？打破次元壁！</p>
</a>
</li>
</ul>
</div>
<!-- 查看更多 -->
<div class="more">
去bilibili App看更多
</div>
<!-- 底部模块 -->
<footer>
<p>信息网络传播视听节目许可证：0910417</p>
<p>网络文化经营许可证 沪网文【2019】3804-274号</p>
<p>广播电视节目制作经营许可证：（沪）字第01248号</p>
<p>增值电信业务经营许可证 沪B2-20100043</p>
</footer>
<!-- 打开app -->
<div class="open">
<i class="iconfont Navbar_logo"></i>
打开App，看你感兴趣的视频
</div>
</body>
</html>
CSS代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
}
a {
display: block;
color: #333;
text-decoration: none;
}
img {
vertical-align: middle;
width: 100%;
height: 100%;
}
ul {
list-style: none;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
body {
padding-top: 21.867vw;
}
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 21.867vw;
border-bottom: 0.267vw solid #eee;
z-index: 99;
background-color: #fff;
}
header .shortcut {
display: flex;
justify-content: space-between;
height: 11.733vw;
padding: 0 3.2vw 0 4.8vw;
}
header .shortcut h1 {
font-weight: 400;
}
header .shortcut h1 i {
color: #fb7299;
font-size: 7.467vw;
}
header .shortcut .right {
display: flex;
align-items: center;
width: 44.533vw;
justify-content: space-between;
}
header .shortcut .right .search {
font-size: 5.76vw;
color: #ccc;
}
header .shortcut .right .login {
width: 6.4vw;
height: 6.4vw;
}
header .shortcut .right .download {
width: 19.2vw;
height: 6.4vw;
}
header .nav {
display: flex;
justify-content: space-between;
}
header .nav ul {
display: flex;
}
header .nav ul li {
font-size: 3.733vw;
height: 9.867vw;
line-height: 9.867vw;
margin: 0 4.267vw;
}
header .nav ul .active {
color: #fb7299;
border-bottom: 0.267vw solid #fb7299;
}
header .nav i {
width: 10.667vw;
height: 10.667vw;
font-size: 5.333vw;
line-height: 10.667vw;
text-align: center;
color: #ccc;
}
.vedio_list ul {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.vedio_list ul li {
margin-top: 2.667vw;
}
.vedio_list ul li a {
width: 46.133vw;
height: 35.2vw;
}
.vedio_list ul li a .top {
position: relative;
}
.vedio_list ul li a .top .mask {
display: flex;
justify-content: space-between;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4.995vw;
color: #fff;
font-size: 3.2vw;
padding: 0 1.067vw;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
}
.vedio_list ul li a .top .mask i {
vertical-align: middle;
margin-right: 1.067vw;
}
.vedio_list ul li a p {
font-size: 3.2vw;
color: #333;
margin-top: 0.8vw;
}
.more {
height: 16vw;
line-height: 16vw;
color: #999;
font-size: 3.2vw;
text-align: center;
}
footer {
background-color: #f4f4f4;
padding: 2.667vw 0;
}
footer p {
height: 8vw;
line-height: 8vw;
font-size: 3.2vw;
color: #999;
text-align: center;
}
.open {
position: fixed;
bottom: 5.333vw;
left: 3.333vw;
z-index: 99;
width: 93.333vw;
height: 10.133vw;
background-color: #fb7299;
border-radius: 5.067vw;
text-align: center;
line-height: 10.133vw;
color: #fff;
font-size: 3.733vw;
}
.open i {
margin-right: 2.667vw;
}
bilibili案例
