移动Web学习06-移动端适配Less预处理器项目案例

项目目标:实现在不同宽度设备中等比缩放的网页效果
在这里插入图片描述
Less代码

@import './base';
@import './normalize';// 变量: 存储37.5
@rootSize: 37.5rem;
*{margin: 0;padding: 0;
}
body {background-color: #F0F0F0;
}// 主体内容
.main {// padding-bottom: (50 / 37.5rem);padding-bottom: (64 / @rootSize);  //轮播.banner{height: (160/@rootSize);ul{li{a{img{width: 100%;height: (160/@rootSize);}}}}}//标题.title{height: (40/@rootSize);line-height:(40/@rootSize);// background-color: pink;h4{font-size: (14/@rootSize);padding-left: (15/@rootSize);color: 3c3c3c;}}   //内容.item{margin-bottom:(10/@rootSize);// 图片.pic{height: (160/@rootSize);position: relative;a{img{width: 100%;height: (160/@rootSize);}}.active{position: absolute;top:(-4/@rootSize);left: (15/@rootSize);width: (64/@rootSize);height: (28/@rootSize);background:url(../images/status_active.png);background-size: contain;color: #fff;font-size: (12/@rootSize);text-align: center;line-height: (24/@rootSize);}.icon-shoucang1{position: absolute;top: (15/@rootSize);right: (18/@rootSize);font-size: (25/@rootSize);color: #fff;}}// 内容.txt{ padding: (8/@rootSize) (15/@rootSize);background-color: #fff;.top{display: flex;justify-content: space-between;h5{width: (290/@rootSize);font-size: (15/@rootSize);}p{color: #FE6249;font-size: (15/@rootSize);};}.bottom{margin-top: (10/@rootSize);display: flex;color: #B4B4B4;font-size: (11/@rootSize);.iconfont{margin-right: (5/@rootSize);font-size: (11/@rootSize);}p{margin-right: (15/@rootSize);}}}&:last-child{margin-bottom: 0;}}
}.footer {position: fixed;width: 100%;bottom: 0;height: (49 / @rootSize);display: flex;align-items: center;justify-content: space-around;background-color: #FECA49;a{text-align: center;color: #D78B09;i{font-size: (24/@rootSize);  }p{font-size: (11/@rootSize);}}.current{color: #F0F0F0;}
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>FC游乐园</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body><!-- 主体内容start--><div class="main"><!--轮播图start --><div class="banner"><ul><li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li></ul></div><!--轮播图end --><!--标题 start --><div class="title"><h4>乐园活动</h4> </div><!--标题 end --><!--内容模块start --><div class="item"><!-- 图片模块 start--><div class="pic"><a href="#"><img src="./uploads/item_1.png" alt=""></a><span class="active">进行中</span><i class="iconfont icon-shoucang1"></i></div><!-- 图片模块 end --><!-- 文本模块start --><div class="txt"><div class="top"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5><p>免费</p></div><div class="bottom"><p><i class="iconfont icon-qizhi"></i><span>200</span>人已报名</p><p><i class="iconfont icon-shizhong"></i><span>周六</span>开始</p></div></div><!-- 文本模块end --></div><!--内容模块end --><!--内容模块start --><div class="item"><!-- 图片模块 start--><div class="pic"><a href="#"><img src="./uploads/item_1.png" alt=""></a><span class="active">进行中</span><i class="iconfont icon-shoucang1"></i></div><!-- 图片模块 end --><!-- 文本模块start --><div class="txt"><div class="top"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5><p>免费</p></div><div class="bottom"><p><i class="iconfont icon-qizhi"></i><span>200</span>人已报名</p><p><i class="iconfont icon-shizhong"></i><span>周六</span>开始</p></div></div><!-- 文本模块end --></div><!--内容模块end --><!--内容模块start --><div class="item"><!-- 图片模块 start--><div class="pic"><a href="#"><img src="./uploads/item_1.png" alt=""></a><span class="active">进行中</span><i class="iconfont icon-shoucang1"></i></div><!-- 图片模块 end --><!-- 文本模块start --><div class="txt"><div class="top"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5><p>免费</p></div><div class="bottom"><p><i class="iconfont icon-qizhi"></i><span>200</span>人已报名</p><p><i class="iconfont icon-shizhong"></i><span>周六</span>开始</p></div></div><!-- 文本模块end --></div><!--内容模块end --><!--内容模块start --><div class="item"><!-- 图片模块 start--><div class="pic"><a href="#"><img src="./uploads/item_1.png" alt=""></a><span class="active">进行中</span><i class="iconfont icon-shoucang1"></i></div><!-- 图片模块 end --><!-- 文本模块start --><div class="txt"><div class="top"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5><p>免费</p></div><div class="bottom"><p><i class="iconfont icon-qizhi"></i><span>200</span>人已报名</p><p><i class="iconfont icon-shizhong"></i><span>周六</span>开始</p></div></div><!-- 文本模块end --></div><!--内容模块end --></div><!-- 主体内容 end --><!-- 底部工具栏 start --><footer class="footer"><a href="#" class="current"><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-iconfront-"></i><p>我的</p></a></footer><!-- 底部工具栏 end --><script src="./js/flexible.js"></script>
</body>
</html>

收获:

​ 1、使用Flex布局、用rem代替px单位

​ 2、使用Less的变量定义语法、和导入语法

​ 3、使用手淘Js文件做适配

​ 4、配置号VsCode的Less语法导出

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/618973.html

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

相关文章

【uniapp踩坑记】——微信小程序转发保存图片

关于微信小程序转发&保存图片 微信小程序图片转发保存简单说明网络图片的转发保存base64流形式图片转发保存 已经好多年没写博客了&#xff0c;最近使用在用uniapp开发一个移动版管理后台&#xff0c;记录下自己踩过的一些坑 吃相别太难看&#xff0c;搞一堆下头僵尸号来点…

Spring Cloud学习笔记:Eureka集群搭建样例

这是本人学习的总结&#xff0c;主要学习资料如下 - 马士兵教育 1、项目架构2、Dependency3、项目启动类4、application.yml5、启动项目 1、项目架构 因为这是单机模拟集群搭建&#xff0c;为了方便管理就都放在了一个项目中。这次准备搭建三个项目server1, server2, server3 …

Linux网络基础 (二) ——(IP、MAC、端口号、TCPUDP协议、网络字节序)

文章目录 IP 地址基本概念源IP地址 & 目的IP地址 MAC 地址基本概念源MAC地址 & 目的MAC地址 端口号基本概念源端口号 & 目的端口号 TCP & UDP 协议基本概念TCP 与 UDP 的抉择 网络字节序大端、小端字节序 &#x1f396; 博主的CSDN主页&#xff1a;Ryan.Alask…

攻防世界---Web_php_include

1.题目链接 2.补充知识&#xff1a; 3.构造&#xff1a;执行成功 /?pagedata://text/plain,<?php phpinfo()?> 4.构造下面url&#xff0c;得到目录路径 /?pagedata://text/plain,<?php echo $_SERVER[DOCUMENT_ROOT]?> 5构造下面url&#xff0c;读取该路径的…

Linux的学习之路:10、进程(2)

摘要 本章主要是说一下fork的一些用法、进程状态、优先级和环境变量。 目录 摘要 一、fork 1、fork的基本用法 2、分流 二、进程状态 三、优先级 四、环境变量 1、常见环境变量 2、和环境变量相关的命令 3、通过代码如何获取环境变量 五、导图 一、fork 1、fork…

微信小程序实现预约生成二维码

业务需求&#xff1a;点击预约按钮即可生成二维码凭码入校参观~ 一.创建页面 如下是博主自己写的wxml&#xff1a; <swiper indicator-dots indicator-color"white" indicator-active-color"blue" autoplay interval"2000" circular > &…

Zookeeper和Kafka的部署

目录 一、Zookeeper的基本概念 1. Zookeeper定义 2. Zookeeper工作机制 3. Zookeeper特点 4. Zookeeper数据结构 5. Zookeeper应用场景 5.1 统一命名服务 5.2 统一配置管理 5.3 统一集群管理 5.4 服务器动态上下线 5.5 软负载均衡 6. Zookeeper 选举机制 6.1 第一…

Cortex-M3/M4处理器的bit-band(位带)技术

ARM Cortex-M3/M4的位带&#xff08;Bit-Band&#xff09;技术是一种内存映射技术&#xff0c;它允许对单个位进行直接操作&#xff0c;而不需要对整个字&#xff08;通常是32位&#xff09;进行操作。这项技术主要用于对特定的位进行高效的读写&#xff0c;特别是在需要对GPIO…

python-numpy(3)-线性代数

一、方程求解 参考资料 对于Ax b 这种方程&#xff1a; np.linalg.inv(A).dot(B)np.linalg.solve(A,b) 1.1 求解多元一次方程一个直观的例子 # AXB # X A^(-1)*B A np.array([[7, 3, 0, 1], [0, 1, 0, -1], [1, 0, 6, -3], [1, 1, -1, -1]]) B np.array([8, 6, -3, 1]…

Kafka 简单介绍

目录 一 消息队列&#xff08;MQ&#xff09; 1&#xff0c;为什么需要消息队列&#xff08;MQ 2&#xff0c;常见的 MQ 中间件 3&#xff0c;MQ 传统应用场景之异步处理 4&#xff0c;使用消息队列的好处 5&#xff0c;消息队列的两种模式 5.1点对点模式&#xf…

Hadoop+Spark大数据技术(微课版)曾国荪、曹洁版思维导图第四次作业 (第4章 HBase分布式DB)

1.简述Hbase的特点及与传统关系数据库的区别 HBase与传统关系数据库的区别 &#xff08;1&#xff09;数据类型 关系数据库具有丰富的数据类型&#xff0c;如字符串型、数值型、日期型、二进制型等。HBase只有字符串数据类型&#xff0c;数据的实际类型都是交由用户自己编写程序…

gitlab:Could not resolve host

fatal: unable to access http://xxx.git/: Could not resolve host: yyy Git-fatal: unable to access ‘https://gitlab.XX.git/‘: Could not resolve host: gitlab.XX.com.cn_drone unable to access .git/: could-CSDN博客 原因&#xff1a; 克隆的时候使用的是这里的HTT…