前端移动web详细解析四
移动 Web 第四天
01-vw适配方案
vw和vh基本使用
vw和vh是相对单位，相对视口尺寸计算结果
-
vw：viewport width（1vw = 1/100视口宽度 ）
-
vh：lviewport height ( 1vh = 1/100视口高度 )
vw布局
vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )
vh问题
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
02-综合案例-酷我音乐
准备工作
-
HTML 结构
-
less 样式
// out: ../css/
@import "./base";头部布局
-
HTML 结构
left
下载APP
-
less 样式
body {
background-color: #f9fafb;
}
@vw:3.75vw;
// 头部
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 (15 / @vw);
height: (50 / @vw);
background-color: #fff;
}头部内容
-
less 样式
header {
// 左边
.left {
width: (235 / @vw);
height: (50 / @vw);
background-image: url(../assets/head.png);
background-size: contain;
background-repeat: no-repeat;
}
a {
width: (80 / @vw);
height: (30 / @vw);
background-color: #ffe31b;
border-radius: (15 / @vw);
text-align: center;
line-height: (30 / @vw);
font-size: (14 / @vw);
}
}搜索区域
-
HTML 结构
搜索你想听的歌曲
-
less 样式
// 搜索
.search {
padding: (10 / @vw) (15 / @vw);
height: (52 / @vw);
// background-color: pink;
.txt {
height: (32 / @vw);
background-color: #f2f4f5;
border-radius: (16 / @vw);
text-align: center;
line-height: (32 / @vw);
color: #a1a4b3;
font-size: (14 / @vw);
.iconfont {
font-size: (16 / @vw);
}
}
}banner 区域
-
HTML 结构
-
less 样式
// banner
.banner {
padding: 0 (15 / @vw);
height: (108 / @vw);
// background-color: pink;
ul {
li {
width: (345 / @vw);
height: (108 / @vw);
img {
width: 100%;
height: 100%;
// cover完全覆盖
// 缩放img，图片比例跟父级盒子比例不同，避免图片挤压变形
object-fit: cover;
border-radius: (5 / @vw);
}
}
}
}
标题公共样式
-
HTML 结构
酷我排行榜
更多
-
less 样式
// 排行榜
.list {
margin-top: (20 / @vw);
padding: 0 (15 / @vw);
}
// 标题 → 公共样式
.title {
display: flex;
justify-content: space-between;
margin-bottom: (16 / @vw);
line-height: (25 / @vw);
h4 {
font-size: (20 / @vw);
}
a {
font-size: (12 / @vw);
color: #a1a4b3;
}
}排行榜内容
-
HTML 结构
-
less 样式
// 排行榜
.list {
margin-top: (20 / @vw);
padding: 0 (15 / @vw);
li {
display: flex;
margin-bottom: (16 / @vw);
height: (105 / @vw);
background-color: #fff;
border-radius: (10 / @vw);
.pic {
margin-right: (20 / @vw);
img {
width: (105 / @vw);
height: (105 / @vw);
border-radius: (10 / @vw);
}
}
.txt {
a {
display: block;
font-size: (12 / @vw);
color: #a1a4b3;
line-height: 1.8;
}
.more {
font-size: (14 / @vw);
color: #333;
.iconfont {
font-size: (16 / @vw);
}
}
}
}
}推荐歌单布局
-
HTML 结构
推荐歌单
更多
- 1
- 1
- 1
- 1
- 1
- 1
-
less 样式
// 推荐歌单
.recommend {
padding: 0 (15 / @vw);
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li {
margin-bottom: (16 / @vw);
width: (105 / @vw);
height: (143 / @vw);
background-color: pink;
}
}
}推荐歌单内容
-
HTML 结构
18.2W
抖音嗨爆DJ！劲爆旋律萦绕双耳
18.2W
抖音嗨爆DJ！劲爆旋律萦绕双耳
18.2W
抖音嗨爆DJ！劲爆旋律萦绕双耳
18.2W
抖音嗨爆DJ！劲爆旋律萦绕双耳
18.2W
抖音嗨爆DJ！劲爆旋律萦绕双耳
18.2W
抖音嗨爆DJ！劲爆旋律萦绕双耳
-
less 样式
// 图片
.pic {
position: relative;
width: (105 / @vw);
height: (105 / @vw);
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: (10 / @vw);
}
.cover {
position: absolute;
left: 0;
bottom: 0;
width: (70 / @vw);
height: (28 / @vw);
background-color: rgba(0,0,0,0.8);
border-radius: 0 (10 / @vw) 0 (10 / @vw);
text-align: center;
line-height: (28 / @vw);
color: #fff;
font-size: (14 / @vw);
}
}
// 文字
.txt {
font-size: (14 / @vw);
}下载区域
-
HTML 结构
安装酷我音乐 发现更多好音乐
-
less 样式
// 下载
.download {
position: fixed;
left: (15 / @vw);
bottom: (30 / @vw);
display: flex;
align-items: center;
padding: 0 (10 / @vw) 0 (15 / @vw);
width: (345 / @vw);
height: (45 / @vw);
background-color: #fff;
border-radius: (22 / @vw);
img {
margin-right: (10 / @vw);
width: (36 / @vw);
height: (36 / @vw);
}
p {
flex: 1;
font-size: (14 / @vw);
}
span {
width: (32 / @vw);
height: (32 / @vw);
background-color: #f2f3f5;
border-radius: 50%;
text-align: center;
line-height: (32 / @vw);
font-size: (16 / @vw);
}
}头部固定
-
less 样式
// 头部
header {
position: fixed;
left: 0;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 (15 / @vw);
// 固定定位的盒子，宽度靠内容撑开，希望宽度100%
width: 100%;
height: (50 / @vw);
background-color: #fff;
}
// 搜索
.search {
// 头部固定定位，脱标不占位，搜索去最顶了，加上外边距挤下来即可
margin-top: (50 / @vw);
padding: (10 / @vw) (15 / @vw);
height: (52 / @vw);
}