4-移动端适配-2

news/2024/11/8 14:41:47/

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 结构
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
  • less 样式
// out: ../css/@import "./base";

头部布局

  • HTML 结构
<!-- 头部 -->
<header><div class="left">left</div><a href="#">下载APP</a>
</header>
  • 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 结构
<!-- 搜索 -->
<div class="search"><div class="txt"><span class="iconfont icon-sousuo"></span><span>搜索你想听的歌曲</span></div>
</div>
  • 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 结构
<!-- banner -->
<div class="banner"><ul><li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li></ul>
</div>
  • 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 结构
<!-- 排行榜 -->
<div class="list"><!-- 标题 --><div class="title"><h4>酷我排行榜</h4><a href="#">更多<span class="iconfont icon-right"></span></a></div>
</div>
  • 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 结构
<!-- 内容 -->
<div class="content"><ul><li><div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div><div class="txt"><a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a><a href="#">2.就让这大雨全都落下 - 容祖儿</a><a href="#">3.缺氧 - 轩姨（相信光）</a></div></li><li><div class="pic"><img src="./assets/icon_rank_new.png" alt=""></div><div class="txt"><a href="#" class="more">酷我新歌榜<span class="iconfont icon-right"></span></a><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a><a href="#">2.就让这大雨全都落下 - 容祖儿</a><a href="#">3.缺氧 - 轩姨（相信光）</a></div></li><li><div class="pic"><img src="./assets/icon_rank_rise.png" alt=""></div><div class="txt"><a href="#" class="more">酷我飙升榜<span class="iconfont icon-right"></span></a><a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a><a href="#">2.就让这大雨全都落下 - 容祖儿</a><a href="#">3.缺氧 - 轩姨（相信光）</a></div></li></ul>
</div>
  • 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 结构
<!-- 推荐歌单 -->
<div class="recommend"><!-- 标题 --><div class="title"><h4>推荐歌单</h4><a href="#">更多<span class="iconfont icon-right"></span></a></div><!-- 内容 --><div class="content"><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div>
</div>
  • 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 结构
<li><div class="pic"><img src="./assets/song01.jpeg" alt=""><div class="cover">18.2W</div></div><div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li><div class="pic"><img src="./assets/song02.jpeg" alt=""><div class="cover">18.2W</div></div><div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li><div class="pic"><img src="./assets/song03.jpeg" alt=""><div class="cover">18.2W</div></div><div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li><div class="pic"><img src="./assets/song02.jpeg" alt=""><div class="cover">18.2W</div></div><div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li><div class="pic"><img src="./assets/song03.jpeg" alt=""><div class="cover">18.2W</div></div><div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li><div class="pic"><img src="./assets/song01.jpeg" alt=""><div class="cover">18.2W</div></div><div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
  • 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 结构
<!-- 安装，下载 -->
<div class="download"><img src="./assets/logo.png" alt=""><p>安装酷我音乐 发现更多好音乐</p><span class="iconfont icon-right"></span>
</div>
  • 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);
}

http://www.ppmy.cn/news/583760.html

相关文章

解决执行shell命令时出现argument list too long错误的问题

解决执行shell命令时出现argument list too long错误的问题

如果执行shell命令时出现argument list too long的错误&#xff0c;其原因是需要操作的目标文件过多&#xff0c;比如超过2万个文件。 解决方式就是分批甚至逐个处理目标文件。 1. grep命令 命令行执行&#xff1a; grep "Java" * -l 如果返回&#xff1a; zsh:…
阅读更多...
SpringBoot 如何使用 Redis 作为缓存？

SpringBoot 如何使用 Redis 作为缓存？

SpringBoot 如何使用 Redis 作为缓存&#xff1f; 引言 在今天的互联网应用中&#xff0c;缓存是一个非常重要的概念。缓存可以减轻数据库的负担&#xff0c;提高系统的性能。Redis 是一个非常流行的内存数据库&#xff0c;它可以用作缓存&#xff0c;提供快速的读写速度和高…
阅读更多...
vh

vh

nzs5e4e## sfc zfr在这里插入代码片 vdrx## ve## ~~ [ ] 标题 ~~
阅读更多...
huang

huang

看这里&#xff01;这里&#xff01;这里&#xff01;
阅读更多...
皇后

皇后

在N*N的方格棋盘放置了N个皇后&#xff0c;使得它们不相互攻击&#xff08;即任意2个皇后不允许处在同一排&#xff0c;同一列&#xff0c;也不允许处在与棋盘边框成45角的斜线上。 你的任务是&#xff0c;对于给定的N&#xff0c;求出有多少种合法的放置方法。 Input 共有若干…
阅读更多...
勃林格殷格翰与Lifebit合作识别全球传染病暴发；百济神州和Shoreline Biosciences达成合作 | 医药健闻...

勃林格殷格翰与Lifebit合作识别全球传染病暴发；百济神州和Shoreline Biosciences达成合作 | 医药健闻...

| 行业焦点 勃林格殷格翰与Lifebit开展合作&#xff0c;识别全球传染病暴发。动物保健领域的全球领导企业勃林格殷格翰宣布与Lifebit生物科技公司开展长期合作&#xff0c;运用人工智能&#xff08;AI&#xff09;处理科学出版物和其他开源信息中的真实世界数据&#xff0c;识别…
阅读更多...
文化中国 系列二：纪连海读历史品人物

文化中国 系列二：纪连海读历史品人物

系列二&#xff1a;纪连海读历史品人物 主讲人&#xff1a;纪连海 讲题&#xff1a;汉武大帝刘彻、清太宗孝庄文皇后博尔济吉特氏、历史上的非凡女人 6、【视频点播及迅雷下载】【纪连海】【文化中国】话说汉武大帝 完整性说明&#xff1a;55集&#xff0c;完整。 &#x…
阅读更多...
vh和vw是什么单位？

vh和vw是什么单位？

在css3中&#xff0c;vh和vw是视口单位&#xff0c;是相对长度单位。 文章目录 前言一、视口单位&#xff08; Viewport units )1.在pc端2.在移动端 二、常见单位及使用1.常见单位2.使用 前言 提示&#xff1a;以下所有内容&#xff0c;仅为个人经验总结&#xff0c;非专业解释…
阅读更多...
最新文章

Copyright @ 2022~2023