一个简单的移动端案例,模拟不同设备下逻辑分辨率不同,宽高自适应
正常打开整体布局
打开 f12 (ctrl + shift + M)或者点击左上角图标,将其模拟为移动端设备
在移动设备iPhone6/7/8,逻辑分辨率375的整体布局
头部和底部的安装使用了 position: fixed; 固定,让头部和底部安装不会随着页面的滚动而产出变化
banner区域没有js,简单点看个样式,所以这里就是一张图片,但是图片宽高与banner区域宽高不同,
为了避免图片挤压变形,使用了 object-fit: cover; 缩放img
移动设备iPhone6/7/8,逻辑分辨率375,其banner图尺寸
现在切换设备为iPad Pro,逻辑分辨率为1024,此设备下banner图尺寸自适应
再切换设备为iPhone 4,逻辑分辨率为320,此设备下banner图尺寸自适应
源码
HTML(index.html)代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>酷我音乐</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 头部 -->
<header>
<div class="left"></div>
<a href="#">下载APP</a>
</header>
<!-- 搜索 -->
<div class="search">
<div class="txt">
<span class="iconfont icon-sousu2"></span>
<span>搜索你想听的歌曲</span>
</div>
</div>
<!-- banner -->
<div class="banner">
<ul>
<li><a href="#"><img src="./assets/banner1.jpg" alt=""></a></li>
</ul>
</div>
<!-- 排行榜 -->
<div class="list">
<!-- 标题 -->
<div class="title">
<h4>酷我排行榜</h4>
<a href="#">更多<span class="iconfont icon-jiantou21"></span></a>
</div>
<!-- 内容 -->
<div class="content">
<ul>
<li>
<div class="pic"><a href="https://m.kuwo.cn/newh5app/ranklist_detail/16"><img src="./assets/rank_hot.png" alt=""></a></div>
<div class="txt">
<a href="https://m.kuwo.cn/newh5app/ranklist_detail/16" class="more">酷我热歌榜<span class="iconfont icon-jiantou21"></span></a>
<a href="https://m.kuwo.cn/newh5app/ranklist_detail/16">1.有风无风皆自由(Live合唱版) - 王一佳</a>
<a href="https://m.kuwo.cn/newh5app/ranklist_detail/16">2.苹果香(黑大婶版) - 黑大婶回乡带娃</a>
<a href="https://m.kuwo.cn/newh5app/ranklist_detail/16">3.若月亮没来 (若是月亮还没来) - 王宇宙Leto&乔浚丞</a>
</div>
</li>
<li>
<div class="pic"><a href="https://m.kuwo.cn/newh5app/ranklist_detail/93"><img src="./assets/rank_rise.png" alt=""></a></div>
<div class="txt">
<a href="https://m.kuwo.cn/newh5app/ranklist_detail/93" class="more">酷我飙升榜<span class="iconfont icon-jiantou21"></span></a>
<a href="https://m.kuwo.cn/newh5app/ranklist_detail/93">1.童话镇 - 小野来了</a>
<a href="https://m.kuwo.cn/newh5app/ranklist_detail/93">2.她才是你的天赐良缘 - 任夏</a>
<a href="https://m.kuwo.cn/newh5app/ranklist_detail/93">3.空壳 - 周深</a>
</div>
</li>
<li>
<div class="pic"><a href="https://m.kuwo.cn/newh5app/ranklist_detail/17"><img src="./assets/rank_new.png" alt=""></a></div>
<div class="txt">
<a href="https://m.kuwo.cn/newh5app/ranklist_detail/17" class="more">酷我新歌榜<span class="iconfont icon-jiantou21"></span></a>
<a href="https://m.kuwo.cn/newh5app/ranklist_detail/17">1.适可而止 - 任夏</a>
<a href="https://m.kuwo.cn/newh5app/ranklist_detail/17">2.童话镇(新版) - 陈雪凝</a>
<a href="https://m.kuwo.cn/newh5app/ranklist_detail/17">3.见一面少一面 - 半吨兄弟</a>
</div>
</li>
</ul>
</div>
</div>
<!-- 推荐歌单 -->
<div class="recommend">
<!-- 标题 -->
<div class="title">
<h4>推荐歌单</h4>
<a href="#">更多<span class="iconfont icon-jiantou21"></span></a>
</div>
<!-- 内容 -->
<div class="content">
<ul>
<li>
<a href="https://m.kuwo.cn/newh5app/playlist_detail/2996314807">
<div class="pic">
<img src="./assets/song01.jpg" alt="">
<div class="cover"><span class="iconfont icon-bofang"></span>1亿</div>
</div>
<div class="txt">经典老歌大放送!一人一首代表作!</div>
</a>
</li>
<li>
<a href="https://m.kuwo.cn/newh5app/playlist_detail/3001661381">
<div class="pic">
<img src="./assets/song02.jpg" alt="">
<div class="cover"><span class="iconfont icon-bofang"></span>3713.5w</div>
</div>
<div class="txt">伤感情歌|不眠夜里的孤单心事</div>
</a>
</li>
<li>
<a href="https://m.kuwo.cn/newh5app/playlist_detail/2802745654">
<div class="pic">
<img src="./assets/song03.jpg" alt="">
<div class="cover"><span class="iconfont icon-bofang"></span>4144.6w</div>
</div>
<div class="txt">【经典国语】老男人的情怀老男人的歌</div>
</a>
</li>
<li>
<a href="https://m.kuwo.cn/newh5app/playlist_detail/3360244412">
<div class="pic">
<img src="./assets/song04.jpg" alt="">
<div class="cover"><span class="iconfont icon-bofang"></span>1239.6w</div>
</div>
<div class="txt">抖音流行丨网红歌曲随身听</div>
</a>
</li>
<li>
<a href="https://m.kuwo.cn/newh5app/playlist_detail/2539910244">
<div class="pic">
<img src="./assets/song05.jpg" alt="">
<div class="cover"><span class="iconfont icon-bofang"></span>2515.6w</div>
</div>
<div class="txt">【燃爆】抖音中俘虏你耳朵的英文歌曲</div>
</a>
</li>
<li>
<a href="https://m.kuwo.cn/newh5app/playlist_detail/2508547657">
<div class="pic">
<img src="./assets/song06.jpg" alt="">
<div class="cover"><span class="iconfont icon-bofang"></span>2810.6w</div>
</div>
<div class="txt">【伤感】对于你,我总是好了伤疤忘了疼</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 听书 -->
<div class="listen">
<!-- 标题 -->
<div class="title">
<h4>听书</h4>
<a href="#">更多<span class="iconfont icon-jiantou21"></span></a>
</div>
<!-- 内容 -->
<div class="content">
<ul>
<li>
<a href="https://m.kuwo.cn/newh5app/radio_detail/10208722">
<div class="pic">
<img src="./assets/listen1.png" alt="">
<div class="cover"><span class="iconfont icon-bofang"></span>4208.7w</div>
</div>
<div class="txt">重温西游记,经典还是经典!</div>
<p>西游记影视剧原声续篇</p>
</a>
</li>
<li>
<a href="https://m.kuwo.cn/newh5app/radio_detail/15390775">
<div class="pic">
<img src="./assets/listen2.png" alt="">
<div class="cover"><span class="iconfont icon-bofang"></span>881.5w</div>
</div>
<div class="txt">岳云鹏孙越十大爆笑相声</div>
<p>岳云鹏孙越爆笑相声合辑</p>
</a>
</li>
<li>
<a href="https://m.kuwo.cn/newh5app/radio_detail/17972243">
<div class="pic">
<img src="./assets/listen3.png" alt="">
<div class="cover"><span class="iconfont icon-bofang"></span>486.7w</div>
</div>
<div class="txt">元芳,你怎么看?</div>
<p>狄仁杰探案集</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 下载 -->
<div class="download">
<img src="./assets/logo.jpg" alt="">
<p>安装酷我音乐 发现更多好音乐</p>
<span class="iconfont icon-jiantou21"></span>
</div>
<!-- 尾部 -->
<div class="footer">
<div class="bottomtop">
<img src="./assets/logo.jpg" alt="">
<p>酷我音乐</p>
</div>
<div class="agreement">
<a href="#"><p>服务协议 | </p></a>
<a href="#"><p>隐私政策 | </p></a>
<a href="#"><p>用户权限 | </p></a>
<p>联系电话: (010)87939999</p>
</div>
<div class="version">
<p>应用版本:10.7.0.0 开发者:北京酷我科技有限公司</p>
</div>
<div class="comInto">
<a href="#">公司简介<span class="iconfont icon-jiantou21"></span></a>
</div>
</div>
</body>
</html>
CSS样式(index.css)代码:
样式是在 less 里面编+计算,然后导出为 index.css
*,
::after,
::before {
box-sizing: border-box;
}
body,
ul,
ol,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, PingFangSC-Regular, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
}
a {
color: #333;
text-decoration: none;
-webkit-tap-highlight-color: regb(0, 0, 0, 0);
}
ul {
list-style-type: none;
}
li {
list-style: none;
}
img {
vertical-align: bottom;
}
body {
background-color: #f9fafb;
}
header {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 13.32622601vw;
background-color: #fff;
box-shadow: 0px 4vw 3.6vw -5.067vw rgba(211, 220, 236, 0.77);
}
header .left {
width: 55.97014925vw;
height: 13.32622601vw;
background: url(../assets/tophead.jpg);
background-size: contain;
}
header a {
margin-right: 3.9978678vw;
width: 23.32089552vw;
height: 7.99573561vw;
background-color: #ffe31b;
text-align: center;
line-height: 7.99573561vw;
border-radius: 3.9978678vw;
font-size: 3.46481876vw;
color: rgba(0, 0, 0, 0.8);
}
.search {
margin-top: 13.32622601vw;
padding: 2.6652452vw 3.9978678vw;
height: 13.85927505vw;
}
.search .txt {
height: 8.52878465vw;
background-color: #f2f4f5;
border-radius: 4.26439232vw;
text-align: center;
line-height: 8.52878465vw;
color: #a1a4b3;
font-size: 3.73134328vw;
}
.search .txt .iconfont {
font-size: 5.06396588vw;
margin-right: 0.26652452vw;
vertical-align: bottom;
}
.banner {
padding: 0 3.9978678vw;
height: 28.78464819vw;
}
.banner ul li {
width: 91.95095949vw;
height: 28.78464819vw;
}
.banner ul li img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2.13219616vw;
}
.list {
margin-top: 5.33049041vw;
margin-bottom: 7.99573561vw;
padding: 0 3.9978678vw;
}
.list li {
display: flex;
margin-bottom: 4.26439232vw;
height: 27.98507463vw;
background-color: #fff;
border-radius: 3.9978678vw;
}
.list li .pic {
margin-right: 5.33049041vw;
}
.list li .pic img {
width: 27.98507463vw;
height: 27.98507463vw;
border-radius: 3.9978678vw;
}
.list li .txt a {
display: block;
font-size: 3.19829424vw;
color: #a1a4b3;
line-height: 1.8;
width: 55.97014925vw;
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list li .txt .more {
font-size: 3.73134328vw;
color: #333;
}
.list li .txt .more .iconfont {
font-size: 4.26439232vw;
}
.title {
display: flex;
justify-content: space-between;
margin-bottom: 4.26439232vw;
line-height: 6.66311301vw;
}
.title h4 {
font-size: 5.33049041vw;
}
.title a {
font-size: 3.19829424vw;
color: #a1a4b3;
}
.title a .iconfont {
font-size: 3.19829424vw;
}
.recommend {
padding: 0 3.9978678vw;
margin-bottom: 4.26439232vw;
}
.recommend ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recommend ul li {
margin-bottom: 4.26439232vw;
width: 27.98507463vw;
height: 38.1130064vw;
}
.recommend ul li .pic {
position: relative;
width: 27.98507463vw;
height: 27.98507463vw;
}
.recommend ul li .pic img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 3.9978678vw;
}
.recommend ul li .pic .cover {
position: absolute;
bottom: 0;
left: 0;
padding: 0 2.6652452vw;
height: 7.59594883vw;
text-align: center;
line-height: 7.59594883vw;
color: #fff;
font-size: 3.46481876vw;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 0 3.9978678vw;
}
.recommend ul li .pic .cover .iconfont {
font-size: 4.26439232vw;
margin-right: 0.79957356vw;
}
.recommend ul li .txt {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 26.65245203vw;
height: 10.66098081vw;
overflow: hidden;
text-overflow: ellipsis;
font-size: 3.73134328vw;
}
.listen {
padding: 0 3.9978678vw;
margin-bottom: 4.79744136vw;
}
.listen ul {
display: flex;
justify-content: space-between;
}
.listen ul li {
margin-bottom: 4.26439232vw;
width: 27.98507463vw;
height: 38.1130064vw;
}
.listen ul li .pic {
position: relative;
width: 27.98507463vw;
height: 27.98507463vw;
}
.listen ul li .pic img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 3.9978678vw;
}
.listen ul li .pic .cover {
position: absolute;
bottom: 0;
left: 0;
padding: 0 2.6652452vw;
height: 7.59594883vw;
text-align: center;
line-height: 7.59594883vw;
color: #fff;
font-size: 3.46481876vw;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 0 3.9978678vw;
}
.listen ul li .pic .cover .iconfont {
font-size: 4.26439232vw;
margin-right: 0.79957356vw;
}
.listen ul li .txt {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 26.65245203vw;
height: 10.66098081vw;
overflow: hidden;
text-overflow: ellipsis;
font-size: 3.73134328vw;
}
.listen ul li p {
font-size: 2.93176972vw;
color: #a1a4b3;
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.download {
position: fixed;
left: 7.99573561vw;
bottom: 7.99573561vw;
display: flex;
align-items: center;
padding: 0 2.6652452vw 0 4.79744136vw;
width: 85.28784648vw;
height: 11.99360341vw;
border-radius: 6.79637527vw;
background-color: #fff;
box-shadow: 0.267vw 0 5.467vw 1px rgba(232, 235, 241, 0.73);
}
.download img {
margin-right: 1.3326226vw;
width: 9.86140725vw;
height: 9.86140725vw;
}
.download p {
flex: 1;
font-weight: 700;
font-size: 3.73134328vw;
}
.download .iconfont {
width: 7.19616205vw;
height: 7.19616205vw;
background-color: #f2f4f5;
border-radius: 50%;
line-height: 7.19616205vw;
text-align: center;
font-weight: 700;
font-size: 3.73134328vw;
}
.footer {
margin-top: 15.45842217vw;
margin-bottom: 28.67803838vw;
height: 23.18763326vw;
font-size: 2.93176972vw;
text-align: center;
}
.footer .bottomtop {
display: flex;
justify-content: center;
align-items: flex-end;
}
.footer .bottomtop img {
width: 5.86353945vw;
height: 6.26332623vw;
vertical-align: bottom;
}
.footer .bottomtop p {
font-size: 3.73134328vw;
margin-left: 1.59914712vw;
}
.footer .agreement {
margin-top: 2.53198294vw;
display: flex;
justify-content: center;
}
.footer .agreement a,
.footer .agreement p {
color: #a1a4b3;
}
.footer .version {
color: #a1a4b3;
line-height: 5.33049041vw;
}
.footer .comInto a {
color: #a1a4b3;
line-height: 4.26439232vw;
}
.footer .comInto a .iconfont {
font-size: 3.73134328vw;
}