認(rèn)識VW和VH
vw和vh是相對單位狭握，相對于視口的尺寸計(jì)算結(jié)果添谊。
vw：viewport width
1vw = 1/100視口寬度
vh：viewport height
1vh = 1/100視口高度
使用vw和vh可以快速實(shí)現(xiàn)等比縮放的網(wǎng)頁效果。
vw和vh相對于rem適配的優(yōu)點(diǎn)：
不需要引入任何js文件仙蚜，也不需要在vscode配置文字大小渐溶。
注意：vw和vh不會同時(shí)去用毛秘，一般工作中的布局使用vw即可（因?yàn)橐苿佣说脑O(shè)計(jì)圖是基于視口寬度375px去設(shè)計(jì)的）
使用px to vw插件即可快速把px轉(zhuǎn)換為vw單位（ctrl+a全選灾而，再alt+a轉(zhuǎn)換即可）
注意：使用px to vw插件的時(shí)候記得把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>
<!-- 快捷導(dǎo)航部分 -->
<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>
<!-- 導(dǎo)航欄部分 -->
<div class="nav">
<ul>
<li class="active">首頁</li>
<li>動畫</li>
<li>番劇</li>
<li>國創(chuàng)</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">打破次元壁旁趟！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎昼激？？打破次元壁锡搜！</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">打破次元壁橙困！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？耕餐？打破次元壁凡傅！</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">打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎肠缔？像捶？打破次元壁！</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">打破次元壁桩砰！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎拓春？？打破次元壁亚隅！</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">打破次元壁硼莽！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？煮纵？打破次元壁懂鸵！</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">打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎行疏？匆光？打破次元壁！</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">打破次元壁酿联！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎终息？？打破次元壁贞让！</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">打破次元壁周崭！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？喳张？打破次元壁续镇！</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">打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎销部？摸航？打破次元壁制跟！</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">打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎酱虎？凫岖？打破次元壁！</p>
</a>
</li>
</ul>
</div>
<!-- 查看更多 -->
<div class="more">
去bilibili App看更多
</div>
<!-- 底部模塊 -->
<footer>
<p>信息網(wǎng)絡(luò)傳播視聽節(jié)目許可證：0910417</p>
<p>網(wǎng)絡(luò)文化經(jīng)營許可證 滬網(wǎng)文【2019】3804-274號</p>
<p>廣播電視節(jié)目制作經(jīng)營許可證：（滬）字第01248號</p>
<p>增值電信業(yè)務(wù)經(jīng)營許可證 滬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案例
