4-移动端适配-2

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.hqwc.cn/news/21.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【深度学习】6-4 卷积神经网络 - CNN的实现

CNN的实现 网络的构成是“Convolution - ReLU - Pooling -Affine - ReLU - Affine - Softmax”&#xff0c;我们将它实现为名为 SimpleConvNet的类。 首先来看一下 SimpleConvNet的初始化&#xff08;init&#xff09;&#xff0c;取下面这些参数。 input_dim——输入数据的维…

移动硬盘中安装Ubuntu 20.04系统——立省99%的问题

目录 关于我为什么要在移动硬盘中装系统 准备工作 开始安装 磁盘分区 创建虚拟机 关于我为什么要在移动硬盘中装系统 (6条消息) 笔记本安装双系统ubuntu时踩的坑——戴尔_放风筝的猪的博客-CSDN博客 准备工作 1.移动硬盘 2.Ubuntu镜像 3.VMware虚拟机 Ubuntu镜像可以从…

Tomcat 8.5 环境搭建指南

文章目录 导言环境搭建总结 导言 欢迎阅读本篇博客&#xff0c;本文将为您提供关于如何搭建Tomcat 8.5环境的详细指南。Tomcat是一个流行的开源Java Servlet容器&#xff0c;它提供了一个运行Java Web应用程序的平台。无论您是新手还是有经验的开发人员&#xff0c;本文都将帮…

微信小程序开发实战 ⑨(TabBar)

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; 微信小程序 &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f4…

Sangfor华东天勇战队:h2数据库console命令执行( CVE-2021-42392 漏洞)

漏洞版本 1.1.100 < H2 Console < 2.0.204 漏洞复现 此处复现版本1.4.197 启动项目如下 在Driver Class中输入javax.naming.InitialContext 在JDBCURL中输入jndi注入恶意链接 生成链接命令&#xff1a; java -jar JNDI-Injection-Exploit-1.0-SNAPSHOT-all.jar -C…

iPhone手机如何添加桌面便签软件小组件?

iPhone手机的小组件功能受到了很多用户的喜爱&#xff0c;它可以让用户更加快捷的查看到APP里面的部分相关内容。这项功能和便签软件结合起来之后&#xff0c;甚至能产生1加1大于二的效果。那么iPhone手机如何添加桌面便签软件小组件呢&#xff1f;以iPhone手机端敬业签桌面便签…

ElasticSearch-Kibana的安装

Kibana的安装 什么是ELK? ELK是Elasticsearch,Logstash,Kibana三大开源框架首字母大写简称,ELK属于大数据,是拆箱即用的,上手比较快 什么是Kibana? Kibana是一个针对ES的开源分析以及可视化平台,用来搜索,查看交互存储在ES索引中的数据,使用Kibana可以通过各类图标进行高级…

C#复制构造函数学习

通过从另一个对象复制变量或将一个对象的数据复制到另一个对象来创建对象的构造函数称为复制构造函数。 复制构造函数是一个参数化构造函数&#xff0c;包含相同类类型的参数。它的主要用途是将新实例初始化为现有实例的值。 using System;namespace Mytest{class User {publi…

CASAIM三维扫描仪在运动防护的应用高端运动器材设计定制器材头盔

CASAIM三维扫描技术在运动防护领域有广泛的应用&#xff0c;可以帮助设计和生产高端运动器材&#xff0c;检测运动器材适配性&#xff0c;以提供更好的运动防护。 CASAIM三维扫描仪可以将运动员的身体尺寸和形状精确地捕捉下来&#xff0c;以便制造出符合其个人需求的定制化器…

服务启动后能ping通但无法访问

近期业务需要&#xff0c;重启了服务器&#xff08;centos 7.4&#xff09;&#xff0c;但是各类服务启动后&#xff0c;仍然无法访问&#xff0c;Nginx的白页面都访问不到&#xff0c;能ping通&#xff0c;nslookup 域名解析也没问题&#xff0c;考虑是防火墙 -- 查看防火墙启…

生物科学大模型调研

生物大模型竞品调研 1 概念分类 大模型&#xff1a;大模型通常指的是参数量较大、层数较深的机器学习模型&#xff0c;例如深度神经网络。这些模型具有大量的可训练参数&#xff0c;通过在大规模数据集上进行训练&#xff0c;能够更好地捕捉数据中的复杂模式和特征。大模型在各…

Java启动项目时,控制台报端口被占用,解决办法

端口占用一般是现在有别的程序正在使用该端口 第一步可以先查出来是哪个程序在占用&#xff1a; netstat -aon | find "8113" //8113为被占用的端口号 此时的结果是这样的&#xff0c;查询出来的为占用此端口程序的PID&#xff08; 25472 &#xff09; 然后根据…