vw / vh
- 目標(biāo)：能夠使用vw單位設(shè)置網(wǎng)頁元素的尺寸
- 相對單位
- 相對視口的尺寸計(jì)算結(jié)果
- vw : viewport width
1vw = 1/100視口寬度 - vh: viewport height
1vh = 1/100視口高度
- 目標(biāo)：實(shí)現(xiàn)在不同寬度的設(shè)備中，網(wǎng)頁元素尺寸等比縮放效果
- vw單位尺寸
- 確定設(shè)計(jì)稿對應(yīng)的vw尺寸 （1/100視口寬度）
查看設(shè)計(jì)稿寬度 → 確定參考設(shè)備寬度 (視口寬度) → 確定vw尺寸 （1/100 視口寬度） - vw單位的尺寸 = px單位數(shù)值 / ( 1/100 視口寬度 )
<!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>體驗(yàn)vw和vh</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
1vw = 1/100 視口寬度
不需要引入任何的js文件，也不需要像rem一樣去vscode配置文字大小
例子：375px設(shè)備 1vw=3.75px
（了解，用不到的）1vh = 1/100 視口高度
*/
/* 相當(dāng)于將視口寬度分為 100 份，50vw正好是視口的一半 */
.box {
width: 50vw;
height: 50vw;
background-color: yellowgreen;
}
</style>
</head>
<body>
<!-- 屏幕寬度一半的正方形 -->
<div class="box"></div>
</body>
</html>
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">
<!-- 引入當(dāng)前對應(yīng)的css文件 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 頭部 -->
<header>
<!-- 快捷導(dǎo)航模塊 -->
<div class="shortcut">
<!-- logo模塊（左邊） -->
<h1>
<i class="iconfont Navbar_logo "></i>
</h1>
<!-- logo模塊 -->
<!-- 右邊模塊 -->
<div class="right">
<a href="#">
<i class="iconfont ic_search_tab search"></i>
</a>
<a href="#">
<img src="./images/login.png" alt="" class="login">
</a>
<a href="#">
<img src="./images/download.png" alt="" class="download">
</a>
</div>
<!-- 右邊模塊 -->
</div>
<!-- 快捷導(dǎo)航模塊 -->
<!-- 導(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 pulldown"></i>
</div>
<!-- 導(dǎo)航欄 -->
</header>
<!-- 頭部 -->
<!-- 視頻列表 -->
<div class="video_list">
<ul>
<li>
<a href="#">
<div class="pic">
<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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/2.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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/3.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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/4.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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/2.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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/3.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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/4.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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/2.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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/3.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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/4.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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/2.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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/3.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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./images/4.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_bofangshu"></i>
3347
</div>
</div>
</div>
<p class="ellipsis-2">
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
打破次元壁！蠟筆小新家的爆款拉面 現(xiàn)實(shí)中真的會好吃嗎？？
</p>
</a>
</li>
</ul>
</div>
<!-- 視頻列表 -->
<!-- 更多：more -->
<div class="more">
<p>
去bilibili App看更多
</p>
</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
// 導(dǎo)入base.less文件
@import url(./base.less);
// 預(yù)留頭部空間
body {
padding-top: 21.867vw;
}
// 存放主題顏色
@themeColor: #fb7299;
// 存放字號大小
@fontSize: 3.2vw;
// 頭部
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 21.867vw;
border-bottom: 0.267vw solid #eee;
// 提升層級，防止被下面的定位元素所遮蓋
z-index: 99;
// 由于背景顏色默認(rèn)是透明的，手動設(shè)置白色底色
background-color: #fff;
// 快捷導(dǎo)航模塊
.shortcut {
// 添加彈性布局
display: flex;
// 主軸上讓盒子一左一右顯示
justify-content: space-between;
padding:0 3.2vw 0 4.8vw;
// 固定高度
height: 11.733vw;
h1 {
font-weight: 400;
i {
color: @themeColor;
font-size: 7.467vw;
}
}
.right {
// 添加彈性布局
display: flex;
// 側(cè)軸垂直居中
align-items: center;
// 固定死寬度或者在第二個(gè) a 標(biāo)簽里面用外邊距撐開空間
width: 44.533vw;
// 主軸排列
justify-content: space-between;
.search {
font-size: 5.76vw;
color: #ccc;
}
.login {
width: 6.4vw;
height: 6.4vw;
}
.download {
width: 19.2vw;
height: 6.4vw;
}
}
}
// 快捷導(dǎo)航模塊
.nav {
// 添加彈性布局
display: flex;
// 一左一右顯示
justify-content: space-between;
ul {
// 添加彈性布局
display: flex;
// 注意：彈性盒子可以設(shè)置寬高且生效
li {
margin: 0 4.267vw;
font-size: 3.733vw;
height: 9.867vw;
// 不設(shè)置高度，默認(rèn)是由內(nèi)容撐開的
// 這里給相應(yīng)的高度是為了讓文本可以垂直居中
line-height: 9.867vw;
}
.active {
color: @themeColor;
border-bottom: 0.267vw solid @themeColor;
}
}
.pulldown {
width: 10.667vw;
height: 10.667vw;
text-align: center;
line-height: 10.667vw;
font-size: 5.333vw;
color: #ccc;
}
}
}
// 視頻列表
.video_list {
ul {
// 添加彈性布局
display: flex;
// 彈性盒子換行
flex-wrap: wrap;
// 平均分配彈性容器的空間
justify-content: space-evenly;
li {
margin-top: 2.667vw;
a {
// 已經(jīng)設(shè)置好是塊級元素
width: 46.133vw;
height: 35.2vw;
p {
font-size: @fontSize;
color: #333;
}
.pic {
// 父相
position: relative;
// 遮罩層
.mask {
// 添加彈性布局
display: flex;
// 一左一右顯示
justify-content: space-between;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4.995vw;
font-size: @fontSize;
color: #fff;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
padding: 0 1.067vw;
i {
vertical-align: middle;
}
}
}
}
}
}
}
// more
.more {
p {
font-size: @fontSize;
color: #999;
height: 16vw;
line-height: 16vw;
text-align: center;
}
}
// 底部
footer {
background-color: #f4f4f4;
padding: 2.667vw 0;
p {
font-size: @fontSize;
color: #999;
height: 8vw;
line-height: 8vw;
text-align: center;
}
}
// 打開APP
.open {
position: fixed;
bottom: 5.333vw;
left: 3.333vw;
background: @themeColor;
width: 93.333vw;
height: 10.133vw;
border-radius: 5.067vw;
font-size: 3.733vw;
color: #fff;
text-align: center;
line-height: 10.133vw;
z-index: 99;
i {
margin-right: 2.667vw;
}
}
