web前端学习第二十四天
长度单位：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 视口宽度 )
vh单位尺寸
- 确定设计稿对应的vh尺寸 （1/100视口高度）
查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）
- vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )
思考：开发中，会不会vw和vh混用呢？
不会。
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。
rem 和 vw / vh 的区别
目标：了解 rem 和 vw / vh 的区别
rem
市场比较常见：
- 需要不断修改html文字大小
- 需要媒体查询media
- 需要 flexible.js
vw/vh
将来(马上)趋势
- 省去各种判断和修改
代表：
b站
今天做 了两个项目，两个移动端，一个游乐园的项目用rem移动适配，一个B站的首页练习项目vw移动适配。
游乐园项目
index.less
@import "./base.less";
@import "./normalize.less";
@rootSize:37.5rem;
// 主体区域
body {
background-color: #F0F0F0 ;
}
// 主体区域
.main {
padding-bottom: (50 / @rootSize);
// 背景图区域
.banner {
height: (160 / @rootSize);
}
// 活动标题
.title {
height: (40 / @rootSize);
background-color: #fff;
line-height: (40 / @rootSize);
padding-left: (15 / @rootSize);
h4 {
font-size: (14 / @rootSize);
color: #3C3C3C ;
}
}
// 活动
.item {
padding-bottom: (10 / @rootSize);
// 图片
.pic {
position: relative;
height: (160 / @rootSize);
// 收藏图标
.icon-shoucang1 {
position: absolute;
top: (15 / @rootSize);
right: (18 / @rootSize);
font-size: (24 / @rootSize);
color: #fff;
}
// 活动进行中
.active {
position: absolute;
top: (-4 / @rootSize);
left: (15 / @rootSize);
width: (68/ @rootSize);
height: (29 / @rootSize);
background-image: url(../images/status_active.png);
background-size: contain;
font-size: (12 / @rootSize);
color: #fff;
text-align: center;
line-height: (25 / @rootSize);
&.off {
// 灰色图片样式
// .active.off {} 必须是active类同时应用了off类
// 交集选择器
background-image: url(../images/status_default.png);
}
}
}
// 文字
.text {
padding: (10 / @rootSize) (15 / @rootSize);
background-color: #fff;
.top {
display: flex;
justify-content: space-between;
h5 {
width: (295 / @rootSize);
font-weight: 400;
font-size: (15 / @rootSize);
}
p {
font-size: (15 / @rootSize);
a {
color: #FE6249;
}
}
}
.bottom {
display: flex;
margin-top: (10 / @rootSize);
p {
font-size: (11 / @rootSize);
color:#B4B4B4 ;
margin-right: (15 / @rootSize);
i {
font-size: (11 / @rootSize);
}
}
}
}
}
}
// 底部区域
footer {
position: fixed;
bottom: 0;
left: 0;
display: flex;
justify-content: space-around;
text-align: center;
align-items: center;
width: 100%;
height: (50 / @rootSize);
background-color: #FECA49 ;
a {
font-size: (11 / @rootSize);
color: #D78B09 ;
.iconfont {
font-size: (24 / @rootSize);
}
&.first {
color: #fff;
}
}
}
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./lib/iconfont/iconfont.css">
head>
<body>
<div class="main">
<div class="banner">
<ul>
<li><a href="#"><img src="./uploads/banner_1.png" alt="">a>li>
ul>
div>
<div class="title" >
<h4>乐园活动h4>
div>
<section class="item">
<div class="pic">
<a href="#"><img src="./uploads/item_2.png" alt="">a>
<i class="iconfont icon-shoucang1">i>
<div class="active off">进行中div>
div>
<div class="text">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动h5>
<p><a href="#">免费a>p>
div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi">i>
<span>200span>人已报名
p>
<p>
<i class="iconfont icon-shizhong">i>
<span>本周六span>开始
p>
div>
div>
section>
<section class="item">
<div class="pic">
<a href="#"><img src="./uploads/item_2.png" alt="">a>
<i class="iconfont icon-shoucang1">i>
<div class="active off">进行中div>
div>
<div class="text">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动h5>
<p><a href="#">免费a>p>
div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi">i>
<span>200span>人已报名
p>
<p>
<i class="iconfont icon-shizhong">i>
<span>本周六span>开始
p>
div>
div>
section>
<section class="item">
<div class="pic">
<a href="#"><img src="./uploads/item_2.png" alt="">a>
<i class="iconfont icon-shoucang1">i>
<div class="active off">进行中div>
div>
<div class="text">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动h5>
<p><a href="#">免费a>p>
div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi">i>
<span>200span>人已报名
p>
<p>
<i class="iconfont icon-shizhong">i>
<span>本周六span>开始
p>
div>
div>
section>
<section class="item">
<div class="pic">
<a href="#"><img src="./uploads/item_2.png" alt="">a>
<i class="iconfont icon-shoucang1">i>
<div class="active off">进行中div>
div>
<div class="text">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动h5>
<p><a href="#">免费a>p>
div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi">i>
<span>200span>人已报名
p>
<p>
<i class="iconfont icon-shizhong">i>
<span>本周六span>开始
p>
div>
div>
section>
<section class="item">
<div class="pic">
<a href="#"><img src="./uploads/item_2.png" alt="">a>
<i class="iconfont icon-shoucang1">i>
<div class="active off">进行中div>
div>
<div class="text">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动h5>
<p><a href="#">免费a>p>
div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi">i>
<span>200span>人已报名
p>
<p>
<i class="iconfont icon-shizhong">i>
<span>本周六span>开始
p>
div>
div>
section>
<section class="item">
<div class="pic">
<a href="#"><img src="./uploads/item_2.png" alt="">a>
<i class="iconfont icon-shoucang1">i>
<div class="active off">进行中div>
div>
<div class="text">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动h5>
<p><a href="#">免费a>p>
div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi">i>
<span>200span>人已报名
p>
<p>
<i class="iconfont icon-shizhong">i>
<span>本周六span>开始
p>
div>
div>
section>
div>
<footer>
<a href="#" class="first">
<i class="iconfont icon-index-copy">i>
<p>首页p>
a>
<a href="#">
<i class="iconfont icon-youhuiquan">i>
<p>卡卷p>
a>
<a href="#">
<i class="iconfont icon-7">i>
<p>我的p>
a>
footer>
<script src="./js/flexible.js">script>
body>
html>
B站首页
index.less
//otu:../css/
@import "./base.less";
@vw:3.75vw;
@color:#fb7299;
// 头部固定
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: (84 / @vw);
z-index: 1;
background-color: #fff;
// background-color: aqua;
.top {
display: flex;
justify-content: space-between;
align-items: center;
height: (44 / @vw);
padding-left: (18 / @vw);
padding-right: (12 / @vw);
.left {
.iconfont{
font-size: (28 / @vw);
color: @color;
}
}
.rigth {
display: flex;
.iconfont {
font-size: (22 / @vw);
color: #ccc;
}
.sign {
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;
// align-items: center;
height: (40 / @vw);
border-bottom: 1px solid #eeeeee;
.move {
a {
display: block;
width: (40 / @vw);
height: (40 / @vw);
// background-color: #fb7299;
font-size: (22 / @vw);
text-align: center;
line-height: (40 / @vw);
color: #ccc;
.iconfont {
font-size: (22 / @vw);
}
}
}
.tab {
ul {
display: flex;
li {
padding: 0 (16 / @vw);
a {
display: block;
height: (38 / @vw);
font-size: (14 / @vw);
line-height: (38 / @vw);
&.current {
color: @color;
border-bottom: 2px solid @color;
}
}
}
}
}
}
}
// 视频
.video_centent {
padding: (84 / @vw) (5 / @vw) 0;
.video_list {
display: flex;
flex-wrap: wrap;
a {
width: 50%;
padding: ( 8 / @vw) (5 / @vw);
font-size: (12 / @vw);
.pic {
position: relative;
width: 100%;
.count {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
padding: (8 / @vw);
color: #fff;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
}
.centent {
.txt {
margin-top: (5 / @vw);
}
}
}
}
}
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./fonts/iconfont.css">
head>
<body>
<header>
<div class="top">
<div class="left">
<a href="#" >
<i class="iconfont Navbar_logo">i>
a>
div>
<div class="rigth">
<a href="#">
<i class="iconfont ic_search_tab">i>
a>
<a href="#" class="sign">
<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="move">
<a href="#">
<i class="iconfont general_pulldown_s">i>
a>
div>
div>
header>
<section class="video_centent">
<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="centent">
<p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19p>
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="centent">
<p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19p>
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="centent">
<p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19p>
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="centent">
<p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19p>
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="centent">
<p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19p>
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="centent">
<p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19p>
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="centent">
<p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19p>
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="centent">
<p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19p>
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="centent">
<p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19p>
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="centent">
<p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19p>
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="centent">
<p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19p>
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="centent">
<p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19p>
div>
a>
div>
section>
body>
html>
