目录
一、vw/vh
用vw单位是相对单位,可以设置网页元素的尺寸 。
相对视口的尺寸计算结果
vw:viewport width
1vw = 1/100视口宽度
vh:viewport height
1vh = 1/100视口高度
1.vw适配原理
在不同宽度的设备中,网页元素尺寸等比缩放效果
1. 确定设计稿对应的vw尺寸 (1/100视口宽度)
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 (1/100 视口宽度)
2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
2.vh适配原理
1. 确定设计稿对应的vh尺寸 (1/100视口高度)
查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 (1/100 视口高度)
2. vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )
![](https://i-blog.csdnimg.cn/blog_migrate/93e25bdf8c0a5da23a5a2ff58c6b4068.png)
效果:
二、案例
index.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>Document</title>
<link rel="stylesheet" href="./fonts/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!--1.头部固定 -->
<header>
<div class="top">
<div class="left">
<a href="#">
<i class="iconfont Navbar_logo"></i>
</a>
</div>
<div class="right">
<!-- 放大镜 图标 -->
<a href="#">
<i class="iconfont ic_search_tab"></i>
</a>
<!-- 登录图片 -->
<a href="#" class="login">
<img src="./images/login.png" alt="">
</a>
<!-- 下载图片 -->
<a href="#" class="download">
<img src="./images/download.png" alt="">
</a>
</div>
</div>
<div class="bottom">
<!-- 选项卡 -->
<div class="tab">
<ul>
<li>
<a href="#" class="current">首页</a>
</li>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">首页</a>
</li>
</ul>
</div>
<div class="more">
<a href="#">
<i class="iconfont general_pulldown_s"></i>
</a>
</div>
</div>
</header>
<!-- 2.视频区域 -->
<section class="video_content">
<!-- 1份视频 未来应该有5份 -->
<div class="video_list">
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">
入不敷出!没有国家愿意举办奥运会了?为何中国还要办冬奥?为何中国还要办冬奥?
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">
入不敷出!没有国家愿意举办奥运会了?为何中国还要办冬奥?为何中国还要办冬奥?
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">
入不敷出!没有国家愿意举办奥运会了?为何中国还要办冬奥?为何中国还要办冬奥?
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">
入不敷出!没有国家愿意举办奥运会了?为何中国还要办冬奥?为何中国还要办冬奥?
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">
入不敷出!没有国家愿意举办奥运会了?为何中国还要办冬奥?为何中国还要办冬奥?
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">
入不敷出!没有国家愿意举办奥运会了?为何中国还要办冬奥?为何中国还要办冬奥?
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">
入不敷出!没有国家愿意举办奥运会了?为何中国还要办冬奥?为何中国还要办冬奥?
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">
入不敷出!没有国家愿意举办奥运会了?为何中国还要办冬奥?为何中国还要办冬奥?
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">
入不敷出!没有国家愿意举办奥运会了?为何中国还要办冬奥?为何中国还要办冬奥?
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">
入不敷出!没有国家愿意举办奥运会了?为何中国还要办冬奥?为何中国还要办冬奥?
</div>
</a>
<a href="#">
<div class="pic">
<img src="./images/1.jpg" alt="">
<div class="count">
<p>
<i class="iconfont icon_shipin_bofangshu"></i>
<span>132</span>万
</p>
<p>
<i class="iconfont icon_shipin_danmushu"></i>
<span>2.4</span>万
</p>
</div>
</div>
<div class="txt ellipsis-2">
入不敷出!没有国家愿意举办奥运会了?为何中国还要办冬奥?为何中国还要办冬奥?
</div>
</a>
</div>
</section>
<!-- 3.按钮固定 -->
<footer>
<div class="download">
<a href="#">
<i class="iconfont Navbar_logo"></i>
<span>打开App,看你感兴趣的视频</span>
</a>
</div>
</footer>
</body>
</html>
index.less
@import url(./base.less);
//定义变量
@vw:3.75vw;
@color:#fb7299;
// 1.头部固定
header{
//设置元素的堆叠顺序
z-index: 1;;
// 定位 固定
position: fixed;
top: 0;
left: 0;
width: 100%;
// width: 100vw;
height: (84/@vw);
background-color: #fff;
.top{
display: flex;
// 水平 两边对齐
justify-content: space-between;
// 垂直 居中
align-items: center;
padding-left: (18/@vw);
padding-right: (12/@vw);
height: (44/@vw);
.left{
.iconfont{
color: @color;
font-size: (28/@vw);
}
}
.right{
display: flex;
.iconfont{
font-size: (22/@vw);
color: #ccc;
}
.login{
width: (24/@vw);
height: (24/@vw);
margin-left: (24/@vw);
}
.download{
width: (72/@vw);
height: (24/@vw);
margin-left: (24/@vw);
}
}
}
.bottom{
display: flex;
//水平 两边对齐
justify-content: space-between;
//水平 居中
height: (40/@vw);
border-bottom: 1px solid #eee;
.tab{
ul{
display: flex;
li{
padding: 0 (16/@vw);
a{
display: block;
line-height: (38/@vw);
line-height: (38/@vw);
font-size: (14/@vw);
&.current{
color: @color;
border-bottom: 2px solid @color;
}
}
}
}
}
.more{
a{
//转显示模式为行内
display: block;
width: (40/@vw);
height: (40/@vw);
// background-color: pink;
text-align: center;
line-height: (40/@vw);
color: #ccc;
.iconfont{
font-size: (20/@vw);
}
}
}
}
}
//2.视频区域
.video_content{
padding: (84/@vw) (5/@vw) 0;
//首页
.video_list{
display: flex;
//让弹性盒子 换行
flex-wrap: wrap;
a{
width: 50%;
padding: (8/@vw) (5/@vw);
// background-color: pink;
font-size: (12/@vw);
.pic{
position: relative;
.count{
//定位
position: absolute;
bottom: 0;
left: 0;
//布局
display: flex;
justify-content: space-between;
padding: (8/@vw);
background: linear-gradient(0deg,rgba(0,0,0,.85),transparent);
width: 100%;
color: white;
i{
//图片和文字 对齐方式
vertical-align: middle;
}
}
}
.txt{
margin-top: (5/@vw);
}
}
}
}
//3.按钮固定
footer{
position: fixed;
bottom: (30/@vw);
// padding:0 (12/@vw);
.download{
width: (375/@vw);
background-color: @color;
font-size: (14/@vw);
line-height: (36/@vw);
text-align: center;
// color: white;
box-shadow: 0 0.53333vw 2.66667vw rgb(0 0 0 / 20%);
border-radius: (25/@vw);
.iconfont{
color: white;
}
span{
color: white;
}
}
}
index.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 {
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;
}
header {
z-index: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 22.4vw;
background-color: #fff;
}
header .top {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 4.8vw;
padding-right: 3.2vw;
height: 11.73333333vw;
}
header .top .left .iconfont {
color: #fb7299;
font-size: 7.46666667vw;
}
header .top .right {
display: flex;
}
header .top .right .iconfont {
font-size: 5.86666667vw;
color: #ccc;
}
header .top .right .login {
width: 6.4vw;
height: 6.4vw;
margin-left: 6.4vw;
}
header .top .right .download {
width: 19.2vw;
height: 6.4vw;
margin-left: 6.4vw;
}
header .bottom {
display: flex;
justify-content: space-between;
height: 10.66666667vw;
border-bottom: 1px solid #eee;
}
header .bottom .tab ul {
display: flex;
}
header .bottom .tab ul li {
padding: 0 4.26666667vw;
}
header .bottom .tab ul li a {
display: block;
line-height: 10.13333333vw;
font-size: 3.73333333vw;
}
header .bottom .tab ul li a.current {
color: #fb7299;
border-bottom: 2px solid #fb7299;
}
header .bottom .more a {
display: block;
width: 10.66666667vw;
height: 10.66666667vw;
text-align: center;
line-height: 10.66666667vw;
color: #ccc;
}
header .bottom .more a .iconfont {
font-size: 5.33333333vw;
}
.video_content {
padding: 22.4vw 1.33333333vw 0;
}
.video_content .video_list {
display: flex;
flex-wrap: wrap;
}
.video_content .video_list a {
width: 50%;
padding: 2.13333333vw 1.33333333vw;
font-size: 3.2vw;
}
.video_content .video_list a .pic {
position: relative;
}
.video_content .video_list a .pic .count {
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
padding: 2.13333333vw;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
width: 100%;
color: white;
}
.video_content .video_list a .pic .count i {
vertical-align: middle;
}
.video_content .video_list a .txt {
margin-top: 1.33333333vw;
}
footer {
position: fixed;
bottom: 8vw;
}
footer .download {
width: 100vw;
background-color: #fb7299;
font-size: 3.73333333vw;
line-height: 9.6vw;
text-align: center;
box-shadow: 0 0.53333vw 2.66667vw rgba(0, 0, 0, 0.2);
border-radius: 6.66666667vw;
}
footer .download .iconfont {
color: white;
}
footer .download span {
color: white;
}
效果: