【移动WEB开发】rem适配布局
目录
1. rem基础
2.媒体查询
2.1 语法规范
2.2 媒体查询+rem
2.3 引入资源（理解）
3. less基础
3.1 维护css的弊端
3.2 less介绍
3.3 less变量
3.4 less编译
3.5 less嵌套
3.6 less运算
4. rem适配方案
4.1 rem实际开发
4.2 技术使用
4.3 rem+媒体查询+less
5. 苏宁网首页案例制作
6. rem适配方案2
1. rem基础
2.媒体查询
2.1 语法规范
/* 媒体查询一般按照从大到小或从小到大的顺序 *//* 样式具有层叠性 *//* screen and 不能省略 *//* 数字后面必须跟单位,and后面要跟空格 */@media screen and (max-width:539px) {body {background-color: blue;}}@media screen and (min-width:540px) {body {background-color: green;}}@media screen and (min-width:970px) {body {background-color: red;}}2.2 媒体查询+rem
@media screen and (min-width:320px) {html {font-size: 50px;}}@media screen and (min-width:640px) {html {font-size: 100px;}}.top {height: 1rem;font-size: .5rem;background-color: green;color: #fff;text-align: center;line-height: 1rem;}2.3 引入资源（理解）
<!-- 媒体查询最好从小到大写 --><!-- 引入资源就是针对不同屏幕尺寸,调用不同的css文件 --><link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"><link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">3. less基础
3.1 维护css的弊端
3.2 less介绍
3.3 less变量
3.4 less编译
3.5 less嵌套
3.6 less运算
除法运算要加小括号才能算
4. rem适配方案
4.1 rem实际开发
4.2 技术使用
4.3 rem+媒体查询+less
5. 苏宁网首页案例制作
将样式文件导入样式文件中
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><title>Document</title>
</head><body><!-- 顶部搜索框 --><div class="search-content"><a href="#" class="classify"></a><div class="search"><form action=""><input type="search" value="厨卫保暖季"></form></div><a href="#" class="login">登录</a></div><!-- banner 部分 --><div class="banner"><img src="upload/banner.gif" alt=""></div><!-- 广告部分 --><div class="ad"><a href="#"><img src="upload/ad1.gif" alt=""></a><a href="#"><img src="upload/ad2.gif" alt=""></a><a href="#"><img src="upload/ad3.gif" alt=""></a></div><!-- nav --><nav><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a></nav>
</body></html>common.less
// 设置常见屏幕尺寸，修改里面的html文字大小
a {text-decoration: none;
}html {// pc端也可以打开font-size: 50px;
}// 本次定义划分的份数为15
@no: 15;
@media screen and (min-width: 320px) {html {font-size: (320px / @no);}
}@media screen and (min-width:360px) {html {font-size: (360px / @no);}
}// 375 iphone 678
@media screen and (min-width:375px) {html {font-size: (375px / @no);}
}@media screen and (min-width:384px) {html {font-size: (384px / @no);}
}@media screen and (min-width:400px) {html {font-size: (400px / @no);}
}@media screen and (min-width:414px) {html {font-size: (375px / @no);}
}@media screen and (min-width:424px) {html {font-size: (424px / @no);}
}@media screen and (min-width:480px) {html {font-size: (480x / @no);}
}@media screen and (min-width:540px) {html {font-size: (540px / @no);}
}@media screen and (min-width:720px) {html {font-size: (720px / @no);}
}@media screen and (min-width:750px) {html {font-size: (750px / @no);}
}index.less
// 将样式文件导入样式文件中
@import "common";body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, sans-serif;background: #f2f2f2;
}// search-content
@baseFont: 50rem;.search-content {display: flex;position: fixed;top: 0;left: 50%;transform: translate(-50%);width: 15rem;height: (88rem / @baseFont);background-color: #ffcc01;.classify {width: (44 / @baseFont);height: (70 / @baseFont);background: url(../images/classify.png);background-size: (44 / @baseFont) (70 / @baseFont);margin: (11 / @baseFont) (25 / @baseFont) (7 / @baseFont) (24 / @baseFont);}.search {flex: 1;input {// 去掉输入时的边框效果outline: none;width: 100%;border: 0;height: (66 / @baseFont);border-radius: (33 / @baseFont);background-color: #fff2cc;margin-top: (12 / @baseFont);font-size: (25 / @baseFont);color: #757575;padding-left: (55 / @baseFont);}}.login {width: (75 / @baseFont);height: (70 / @baseFont);margin: (10 / @baseFont);font-size: (25 / @baseFont);text-align: center;color: #fff;line-height: (70 / @baseFont);}
}// banner
.banner {width: (750 / @baseFont);height: (368 / @baseFont);img {width: 100%;height: 100%;}
}// ad
.ad {display: flex;a {flex: 1;img {width: 100%;}}
}// nav
nav {width: (750 / @baseFont);a {float: left;width: (150 / @baseFont);height: (140 / @baseFont);text-align: center;img {display: block;width: (82 / @baseFont);height: (82 / @baseFont);margin: (10 / @baseFont) auto 0;}span {display: block;font-size: (25 / @baseFont);color: #333;margin-top: 5px;}}
}6. rem适配方案2
flexible.js + rem
插件 cssrem 可以将px转换成rem；
这个插件默认的html文字大小 cssroot 16px；
在设置中搜索设置 cssroot ，将工作区的font size 设置为想要的。
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><!-- 引入我们的flexible.js 文件 --><script src="js/flexible.js"></script><title>Document</title>
</head><body><div class="search-content"><a href="#" class="classify"></a><div class="search"><form action=""><input type="search" value="rem适配方案2很开心哦"></form></div><a href="#" class="login">登录</a></div>
</body></html>index.css
body {min-width: 320px;max-width: 750px;/* flexible 给我们划分了 10 等份 */width: 10rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #f2f2f2;}a {text-decoration: none;font-size: .333333rem;
}/* 这个插件默认的html文字大小 cssroot 16px *//*
img {width: 5.125rem;height: 4rem;width: 1rem;width: 1.093333rem;height: 1rem;
} *//* 如果我们的屏幕超过了 750px 那么我们就按照 750设计稿来走 不会让我们页面超过750px */@media screen and (min-width: 750px) {html {font-size: 75px !important;}
}/* search-content */.search-content {display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 10rem;height: 1.173333rem;background-color: #FFC001;
}.classify {width: .586667rem;height: .933333rem;margin: .146667rem .333333rem .133333rem;background: url(../images/classify.png) no-repeat;background-size: .586667rem .933333rem;
}.search {flex: 1;
}.search input {outline: none;border: 0;width: 100%;height: .88rem;font-size: .333333rem;background-color: #FFF2CC;margin-top: .133333rem;border-radius: .44rem;color: #757575;padding-left: .733333rem;
}.login {width: 1rem;height: .933333rem;margin: .133333rem;color: #fff;text-align: center;line-height: .933333rem;font-size: .333333rem;
}相关文章：
【移动WEB开发】rem适配布局
目录 1. rem基础 2.媒体查询 2.1 语法规范 2.2 媒体查询rem 2.3 引入资源（理解） 3. less基础 3.1 维护css的弊端 3.2 less介绍 3.3 less变量 3.4 less编译 3.5 less嵌套 3.6 less运算 4. rem适配方案 4.1 rem实际开发 4.2 技术使用 4.3 …...
25年携程校招社招求职能力北森测评材料计算部分：备考要点与误区解析
在求职过程中，能力测评是筛选候选人的重要环节之一。对于携程这样的知名企业，其能力测评中的材料计算部分尤为关键。许多求职者在备考时容易陷入误区，导致在考试中表现不佳。本文将深入解析材料计算部分的实际考察方向，并提供针对…...
【Elasticsearch入门到落地】9、hotel数据结构分析
接上篇《8、RestClient操作索引库-基础介绍及导入demo》 上一篇我们介绍了RestClient的基础，并导入了使用Java语言编写的RestClient程序Demo以及将要分析的数据库。本篇我们就要分析导入的宾馆数据库tb_hotel表结构的具体含义，并分析如何建立其索引库。 …...
现代互联网网络安全与操作系统安全防御概要
现阶段国与国之间不用对方路由器，其实是有道理的，路由器破了，内网非常好攻击，内网共享开放端口也非常多，更容易攻击。还有些内存系统与pe系统自带浏览器都没有javascript脚本功能，也是有道理的，…...
轻量级TCC框架的实现
现有seata、tcc-transaction等tcc框架实现都较为重量级，今天主要带来一种轻量级的实现，大概只用了1200行代码实现。不依赖具体框架grpc、http、dubbo等，只需要业务系统按照标准化实现Try、Commit、Cancel实现接口即可。 已解决悬挂、幂等、空…...
共绘智慧升级，看永洪科技助力由由集团起航智慧征途
在数字化洪流汹涌澎湃的当下，企业如何乘风破浪，把握转型升级的黄金机遇，已成为所有企业必须直面的时代命题。由由集团，作为房地产的领航者，始终以前瞻视野引领变革，坚决拥抱数字化浪潮，携手数字…...
小程序开发总结
今年第一次帮别人做小程序。 从开始动手到完成上线，一共耗时两天。AI 让写代码变得简单、高效。 不过，小程序和 Flutter 等大厂开发框架差距实在太大，导致我一开始根本找不到感觉。 第一，IDE 不好用，各种功能杂糅在…...
元脑服务器：浪潮信息引领AI基础设施的创新与发展
根据国际著名研究机构GlobalData于2月19日发布的最新报告，浪潮信息在全球数据中心领域的竞争力评估中表现出色，凭借其在算力算法、开放加速计算和液冷技术等方面的创新，获得了“Leader”评级。在创新、增长力与稳健性两个主要维度上ÿ…...
uniapp+node+mysql接入deepseek实现流式输出
node import express from express; import mysql from mysql2; import cors from cors; import bodyParser from body-parser; import axios from axios; import { WebSocketServer } from ws; // 正确导入 WebSocketServerconst app express();// Middlewares app.use(cors…...
PHP MySQL 创建数据库
PHP MySQL 创建数据库 引言 在网站开发中，数据库是存储和管理数据的核心部分。PHP 和 MySQL 是最常用的网页开发语言和数据库管理系统之一。本文将详细介绍如何在 PHP 中使用 MySQL 创建数据库，并对其操作进行详细讲解。 前提条件 在开始创建数据库之…...
UE4 World, Level, LevelStreaming从入门到深入
前言 在《塞尔达传说：旷野之息》中，玩家攀上初始高塔的瞬间，目光所及的山川湖泊皆可抵达；在《艾尔登法环》中，黄金树的辉光始终悬于地平线之上，指引玩家穿越无缝衔接的史诗战场。这些现代游戏杰作背后的核…...
3月8日实验
拓扑： 需求： 1.学校内部的HTTP客户端可以正常通过域名www.baidu.com访问到白度网络中的HTTP服务器 2.学校网络内部网段基于192.168.1.0/24划分，PC1可以正常访问3.3.3.0/24网段，但是PC2不允许 3.学校内部路由使用静态路由&#…...
IO多路复用实现并发服务器
一.select函数 select 的调用注意事项 在使用 select 函数时，需要注意以下几个关键点： 1. 参数的修改与拷贝 readfds 等参数是结果参数 ： select 函数会直接修改传入的 fd_set（如 readfds、writefds 和 exceptfds…...
【漫话机器学习系列】122.相关系数（Correlation Coefficient）
深入理解相关系数（Correlation Coefficient） 1. 引言 在数据分析、统计学和机器学习领域，研究变量之间的关系是至关重要的任务。我们常常想知道：当一个变量变化时，另一个变量是否也会随之变化？如果会&…...
控制系统分类
文章目录 定义与特点1. 自治系统（Autonomous System）与非自治系统（Non-Autonomous System）自治系统非自治系统 2. 线性系统（Linear System）与非线性系统（Nonlinear System）线性系统非…...
文档操作方法得合理使用
博主介绍：✌全网粉丝5W，全栈开发工程师，从事多年软件开发，在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战，博主也曾写过优秀论文，查重率极低，在这方面有丰富的经验…...
Python asyncIO 面试题及参考答案 草
目录 如何正确定义一个协程函数？直接调用协程会引发什么问题？ 使用 async def 定义的协程与普通函数执行流程有何本质区别？ 解释 asyncio.run () 的作用及与手动管理事件循环的差异 为什么协程中必须使用 await 而非 yield 挂起操作？ 写出通过 async for 实现异步迭代器…...
计算机网络——交换机
一、什么是交换机？ 交换机（Switch）是局域网（LAN）中的核心设备，负责在 数据链路层（OSI第二层）高效转发数据帧。它像一位“智能交通警察”，根据设备的 MAC地址 精准引导数…...
matlab和FPGA联合仿真时读写.txt文件数据的方法
在FPGA开发过程中，往往需要将MATLAB生成的数据作为原始激励灌入FPGA进行仿真。为了验证FPGA计算是否正确，又需要将FPGA计算结果导入MATLAB绘图与MATLAB计算结果对比。 下面是MATLAB“写.txt”、“读.txt”，Verilog“读.txt”、“写.txt”的代…...
解锁DeepSpeek-R1大模型微调：从训练到部署，打造定制化AI会话系统
目录 1. 前言 2.大模型微调概念简述 2.1. 按学习范式分类 2.2. 按参数更新范围分类 2.3. 大模型微调框架简介 3. DeepSpeek R1大模型微调实战 3.1.LLaMA-Factory基础环境安装 3.1大模型下载 3.2. 大模型训练 3.3. 大模型部署 3.4. 微调大模型融合基于SpirngBootVue2…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
智慧医疗能源事业线深度画像分析（上）
引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
python/java环境配置
环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选 可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求，由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面： 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限，形成层级清晰的管理网络…...
)
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...