移动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语法导出
相关文章：
移动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);pa…...
LangChain-25 ReAct 让大模型自己思考和决策下一步 AutoGPT实现途径、AGI重要里程碑
背景介绍 大模型ReAct（Reasoning and Acting）是一种新兴的技术框架，旨在通过逻辑推理和行动序列的构建，使大型语言模型（LLM）能够达成特定的目标。这一框架的核心思想是赋予机器模型类似人类的推理和行动能…...
24/04/15总结
多线程： 线程 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中，是进程中的实际运作单位 并发:在同一时刻，有多个指令在单个cpu上交替执行 并行:在同一时刻，有多个指令在多个cpu上同时执行 多线程的实现方式 1.继承…...
vue3、vue2中nextTick源码解析
nexttick是啥 nextTick是Vue提供的一个全局API，由于Vue的异步更新策略导致我们对数据的修改不会更新，如果此时想要获取更新后的Dom，就需要使用这个方法. vue的异步更新策略意思是如果数据变化,vue不会立刻更新dom,而是开启一个队列,把组件更…...
【氮化镓】GaN HEMTs结温和热阻测试方法
文章《Temperature rise detection in GaN high-electron-mobility transistors via gate-drain Schottky junction forward-conduction voltages》，由Xiujuan Huang, Chunsheng Guo, Qian Wen, Shiwei Feng, 和 Yamin Zhang撰写，发表在《Microelectroni…...
c++11 标准模板（STL）本地化库 - 平面类别（std::codecvt） - 在字符编码间转换，包括 UTF-8、UTF-16、UTF-32 （四）
本地化库 本地环境设施包含字符分类和字符串校对、数值、货币及日期/时间格式化和分析，以及消息取得的国际化支持。本地环境设置控制流 I/O 、正则表达式库和 C 标准库的其他组件的行为。 平面类别 在字符编码间转换，包括 UTF-8、UTF-16、UTF-32 std::…...
【状态压缩 容斥原理 组合数学】100267. 单面值组合的第 K 小金额
本文涉及知识点 状态压缩 容斥原理 组合数学 二分查找算法合集 LeetCode100267. 单面值组合的第 K 小金额 给你一个整数数组 coins 表示不同面额的硬币，另给你一个整数 k 。 你有无限量的每种面额的硬币。但是，你 不能 组合使用不同面额的硬币。 返回…...
.net框架和c#程序设计第三次测试
目录 一、测试要求 二、实现效果 三、实现代码 一、测试要求 二、实现效果 数据库中的内容： 使用数据库中的账号登录： 若不是数据库中的内容： 三、实现代码 login.aspx文件： <% Page Language"C#" AutoEventW…...
架构师系列-搜索引擎ElasticSearch（五）- 索引设计
索引创建后，要非常谨慎，创建不好后面会出现各种问题。 索引设计的重要性 索引创建后，索引分片只能通过_split和_shrink 接口对其进行成倍的增加和缩减。 ES的数据是通过_routing分配到各个分片上的，所以本质上不推荐区改变索引的…...
kafka ----修改log4j、jmx、jvm参数等
1、修改log4j 日志路径 在kafka-run-class.sh文件中修改如下配置，将 LOG_DIR变量指定为自己想要存储的路径 # Log directory to use if [ "x$LOG_DIR" "x" ]; thenLOG_DIR"$base_dir/logs" fi2、修改jmx参数 在kafka-run-class.s…...
Python 全栈 Web 应用模板：成熟架构，急速开发 | 开源日报 No.223
tiangolo/full-stack-fastapi-template Stars: 15.6k License: MIT full-stack-fastapi-template 是一个现代化的全栈 Web 应用模板。 使用 FastAPI 构建 Python 后端 API。使用 SQLModel 进行 Python SQL 数据库交互（ORM）。Pydantic 用于数据验证和设…...
STM32之DHT11温湿度传感器
目录 一 DHT11温湿度传感器简介 1.1 传感器特点 1.2 传感器特性 1.3 传感器引脚说明 二 测量原理及方法 2.1 典型应用电路 2.2 单线制串行简介 2.2.1 串行接口 (单线双向) 2.2.2 数据示例 2.3 通信时序 三 单片机简介 3.1 STM32F103C8T6最小系统板 四 接线说明 …...
paddle ocr
paddle安装教程，git clone xxxgit https://blog.csdn.net/Castlehe/article/details/117356343 只有paddle 1.x 的教程：https://github.com/PaddlePaddle/PaddleOCR/blob/static/doc/doc_en/quickstart_en.md 报错是因为安装的是paddle 2.x而教程只给了…...
Xcode 15.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得
概览 从 Xcode 15 开始，苹果推出了新的 #Preview 宏预览机制，它无论从语法还是灵活性上都远远超过之前的预览方式。#Preview 不但可以实时预览 SwiftUI 视图，而且对 UIKit 的界面预览也是信手拈来。 想学习新 #Preview 预览的一些超实用调试…...
【VS2019】x64 Native Tools Command Prompt for Vs 2019使用conda命令进入环境
【VS2019】x64 Native Tools Command Prompt for Vs 2019使用conda命令进入环境 安装完VS2019后，打开终端x64 Native Tools Command Prompt for Vs 2019，直接运行conda会出现‘conda’ 不是内部或外部命令，也不是可运行的程序 原因分析&am…...
网络篇09 | 运输层 udp
网络篇09 | 运输层 udp 01 简介UDP 是面向报文的 02 报文协议 01 简介 UDP 只在 IP 的数据报服务之上增加了一些功能：复用和分用、差错检测 UDP 的主要特点：无连接。发送数据之前不需要建立连接。 使用尽最大努力交付。即不保证可靠交付。 面向报文。…...
vim相关指令
vim的各种模式及其转换关系图 vim 默认处于命令模式！！！ 模式之间转换的指令 除【命令模式】之外，其它模式要切换到【命令模式】，只需要无脑 ESC 即可！！！ [ 命令模式 ] 切换至 [ 插…...
STM32常见调试工具介绍
STM32的常见调试工具主要包括ST-LINK、USB转TTL、USB转485以及USB转CAN。这些工具在嵌入式系统开发、调试以及通信中发挥着重要的作用。 1.ST-LINK： ST-LINK是STMicroelectronics公司专为其STM32系列微控制器开发的调试和编程工具。既能仿真也能将编译好的程序下载…...
简历上写熟悉Linux下常用命令？直接寄
大家写简历技术栈时，都觉得越多越好，其中一条，熟悉Linux下常用命令？其实开发中Linux不是必备考点，除了运维，真正用的多的仅仅cd ls mkdir等，但当面试官问到上面命令时，是不是就傻眼了…...
【设计模式】4、prototype 原型模式
四、prototype 原型模式 https://refactoringguru.cn/design-patterns/prototype 如果希望 复制对象, 可使用 “prototype 模式” 如果 “待复制的对象” 是 interface 而不是 class, 或者如果 class 有 private 变量时. 无法知道 "待复制的对象"的细节, 则需要其…...
s2-pro多场景落地：法律文书语音宣读+重点条款强调音效添加
s2-pro多场景落地：法律文书语音宣读重点条款强调音效添加 1. 场景需求分析 在法律服务领域，文书宣读是一项高频且重要的需求。传统方式存在几个痛点： 人工宣读成本高：需要专业播音员录制，耗时耗力修改不便ÿ…...
【Python工业视觉部署黄金法则】：20年实战总结的5大避坑指南与实时推理加速秘籍
第一章：Python工业视觉部署的工程化本质与挑战全景工业视觉系统在产线落地时，远非“模型训练完成 → 用OpenCV加载推理”这般线性。其核心矛盾在于：算法原型追求精度与泛化，而工程部署必须兼顾实时性、鲁棒性、可维护性与硬件约束…...
LLaMA-Adapter微调终极指南：1小时掌握120万参数的高效优化技巧
LLaMA-Adapter微调终极指南：1小时掌握120万参数的高效优化技巧 【免费下载链接】LLaMA-Adapter Fine-tuning LLaMA to follow Instructions within 1 Hour and 1.2M Parameters 项目地址: https://gitcode.com/gh_mirrors/ll/LLaMA-Adapter LLaMA-Adapter是一…...
10分钟精通语音识别：FunASR热词定制实战指南
10分钟精通语音识别：FunASR热词定制实战指南 FunASR作为端到端语音识别工具包，其热词定制功能能够显著提升专业术语的识别准确率。在医疗、金融、科技等专业领域，通过简单的配置文件即可实现98%以上的专业词汇识别精度。本文将从零开始&…...
基于YOLOv10深度学习的变电站液体泄露红外检测系统（YOLOv10+YOLO数据集+UI界面+Python项目+模型）
一、项目介绍 项目背景 随着电力系统的快速发展，变电站作为电网的核心节点，其安全稳定运行至关重要。液体泄漏（如绝缘油、冷却液等）是变电站设备（如变压器、电抗器、套管等）的常见故障之一，若…...
基于ChatGPT GPTs的AI辅助开发实战：从零构建智能代码生成器
背景痛点：传统开发流程中的效率瓶颈 作为一名开发者，我们每天都在与代码打交道。但你是否也经常遇到这些令人头疼的场景？ 需求理解偏差：产品经理用自然语言描述了一个复杂功能，你花了大半天时间反复沟通，…...
一站式云存储整合：NetMount 2024实战指南
一站式云存储整合：NetMount 2024实战指南 【免费下载链接】NetMount 统一管理和挂载云存储设施/Unified management and mounting of cloud storage facilities 项目地址: https://gitcode.com/gh_mirrors/ne/NetMount 在当今多云环境下，企业和个…...
XXE漏洞实战：CTF大赛压轴题型解析
题目靶场过大，可以关注我私信xxe回复你靶场 xxe靶场环境搭建 搭建靶场，进入靶场发现这是一个Linux登陆界面，第一个坑就是以为要进行爆破进入虚拟机内部，考官实际上考察xxe漏洞，不需要进入靶场内部，想一想…...
低成本替代方案：OpenClaw+Qwen3-32B镜像实现ChatGPT插件功能
低成本替代方案：OpenClawQwen3-32B镜像实现ChatGPT插件功能 1. 为什么需要本地化插件替代方案 去年我在团队内部推广ChatGPT时，发现一个尴尬现象：每当演示网页摘要或代码解释功能时，总会有人问"这些数据会不会传到OpenAI服…...
计算机毕业设计springboot基于的乡村有机产品交易平台的设计与实现 基于Spring Boot的农特产品线上购销管理系统 利用Spring Boot构建的乡村绿色农产品电商服务平台
计算机毕业设计springboot基于的乡村有机产品交易平台的设计与实现（配套有源码 程序 mysql数据库 论文） 本套源码可以在文本联xi,先看具体系统功能演示视频领取，可分享源码参考。 随着互联网技术的深度普及与电子商务的蓬勃发展，消…...