vw / vh
- 目标：能够使用vw单位设置网页元素的尺寸
- 相对单位
- 相对视口的尺寸计算结果
- vw : viewport width
1vw = 1/100视口宽度 - vh: viewport height
1vh = 1/100视口高度
- 目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
- vw单位尺寸
- 确定设计稿对应的vw尺寸 （1/100视口宽度）
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度） - vw单位的尺寸 = px单位数值 / ( 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>体验vw和vh</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
1vw = 1/100 视口宽度
不需要引入任何的js文件，也不需要像rem一样去vscode配置文字大小
例子：375px设备 1vw=3.75px
（了解，用不到的）1vh = 1/100 视口高度
*/
/* 相当于将视口宽度分为 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">
<!-- 引入当前对应的css文件 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 头部 -->
<header>
<!-- 快捷导航模块 -->
<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>
<!-- 快捷导航模块 -->
<!-- 导航栏 -->
<div class="nav">
<ul>
<li class="active">首页</li>
<li>动画</li>
<li>番剧</li>
<li>国创</li>
<li>音乐</li>
</ul>
<i class="iconfont general_pulldown_s pulldown"></i>
</div>
<!-- 导航栏 -->
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</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">
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
打破次元壁！蜡笔小新家的爆款拉面 现实中真的会好吃吗？？
</p>
</a>
</li>
</ul>
</div>
<!-- 视频列表 -->
<!-- 更多：more -->
<div class="more">
<p>
去bilibili App看更多
</p>
</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
// 导入base.less文件
@import url(./base.less);
// 预留头部空间
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;
// 由于背景颜色默认是透明的，手动设置白色底色
background-color: #fff;
// 快捷导航模块
.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;
// 侧轴垂直居中
align-items: center;
// 固定死宽度或者在第二个 a 标签里面用外边距撑开空间
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;
}
}
}
// 快捷导航模块
.nav {
// 添加弹性布局
display: flex;
// 一左一右显示
justify-content: space-between;
ul {
// 添加弹性布局
display: flex;
// 注意：弹性盒子可以设置宽高且生效
li {
margin: 0 4.267vw;
font-size: 3.733vw;
height: 9.867vw;
// 不设置高度，默认是由内容撑开的
// 这里给相应的高度是为了让文本可以垂直居中
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 {
// 已经设置好是块级元素
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;
}
}
