移动WEB开发之rem适配布局
一、 rem 基础
rem (root em)是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小 。
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
这就像在建筑工地上用不同的尺子量东西，rem 相当于整个工地统一用一把固定长度的尺子（html 的字号），而 em 则是每个包工头自己带的不同长度的尺子（父元素的字号）。
举个例子说明：
假设你在装修三个房间：
- 客厅（父元素 font-size: 16px）
- 卧室（父元素 font-size: 14px）
- 书房（父元素 font-size: 12px）
如果用 em：
- 客厅的沙发宽 2em → 32px
- 卧室的床头柜宽 2em → 28px
- 书房的书架宽 2em → 24px
（每个房间家具尺寸都不同）
如果用 rem：
- html 的 font-size 统一设置为 10px
- 所有家具宽 2rem → 不管在哪个房间都是 20px
（所有家具尺寸完全统一）
核心区别：
- em 是 "子随父变"（每个父元素是独立标尺）
- rem 是 "全局统一"（整个页面共用 html 标尺）
为什么 rem 更好？
- 布局可控性：所有元素都按同一标准缩放，避免因父元素不同导致尺寸混乱
- 响应式适配：只需改变 html 的 font-size，就能让整个页面等比例缩放
- 维护成本低：修改一个地方（html 字号）就能影响全局，不用逐个调整元素
实际应用场景：
- 当你需要按钮、图片等元素在不同屏幕尺寸下保持固定比例时
- 当页面结构复杂，存在多层嵌套的父元素时
- 当需要快速实现响应式布局时
比如手机淘宝首页，所有商品卡片的宽高比都保持一致，就是通过 rem+html 统一标尺实现的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rem Layout Example</title>
<style>
/* 设置根元素的字体大小 */
html {
font-size: 16px;
}
body {
font-family: Arial, sans-serif;
}
/* 使用 rem 单位设置容器的宽度和内边距 */
.container {
width: 20rem;
padding: 1rem;
margin: 2rem auto;
border: 1px solid #ccc;
border-radius: 0.5rem;
}
/* 使用 rem 单位设置标题和段落的字体大小 */
h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
p {
font-size: 1rem;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<h1>Rem 布局示例</h1>
<p>此示例展示了如何使用 rem 单位来控制页面元素的大小。rem 单位是相对于根元素（html）的字体大小。</p>
</div>
</body>
</html>
二、媒体查询
媒体查询（Media Queries）是响应式网页设计的核心技术之一，它允许网页根据设备的特性（如屏幕宽度、高度、分辨率、方向等）来应用不同的CSS样式。通过这种方式，可以确保网页在各种不同尺寸和分辨率的设备上都能有良好的显示效果，包括桌面电脑、笔记本电脑、平板电脑和智能手机等。
1.什么是媒体查询
媒体查询（Media Query）是CSS3新语法。
使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
2 语法规范
@media mediatype and|not|only (media feature) {
CSS-Code;
}
用 @media 开头 注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性 必须有小括号包含
⑴. mediatype 查询类型
将不同的终端设备划分成不同的类型，称为媒体类型
⑵. 关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
⑶.媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。 注意他们要加小括号包含
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
/* max-width 小于等于800 */
/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
@media screen and (max-width: 500px) {
body {
background-color: purple;
}
}
</style>
</head>
<body>
</body>
</html>屏幕小于800px则变粉色，小于500px变紫色
⑷.案例:根据页面宽度改变背景变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
/* 2. 小于540px 页面的背景颜色变为蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
/* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
} */
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
/* 4. 大于等于970 我们页面的颜色改为 红色 */
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
/* 5. screen 还有 and 必须带上不能省略的 */
/* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */
</style>
</head>
<body>
</body>
</html>
因为层叠性，第二档只有中间有效
3. 媒体查询+rem实现元素动态大小变化
实现字体随屏幕变大或变小
rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化
⑴.案例：媒体查询+rem实现元素变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* html {
font-size: 100px;
} */
/* 从小到大的顺序 */
@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;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
</html>
4.引入资源（理解）
当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。 原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。
在移动端，小屏一套css，中屏一套css，大屏一套css
语法规范
<link rel="stylesheet"
media="mediatype and|not|only (media feature)"
href="mystylesheet.css">
示例
<link rel="stylesheet"
href="styleA.css"
media="screen and (min-width: 400px)">
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 当我们屏幕大于等于 640px以上的，我们让div 一行显示2个 */
/* 当我们屏幕小于640 我们让div一行显示一个 */
/* 一个建议： 我们媒体查询最好的方法是从小到大 */
/* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */
</style>
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>css1
div {
width: 100%;
height: 100px;
}
div:nth-child(1) {
background-color: pink;
}
div:nth-child(2) {
background-color: purple;
}css2
div {
float: left;
width: 50%;
height: 100px;
}
div:nth-child(1) {
background-color: pink;
}
div:nth-child(2) {
background-color: purple;
}
三、Less 基础
1. 维护 css 的弊端
CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
2 Less 介绍
Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为CSS预处理器。
做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法上，为CSS加入程序式语言的特性。
它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。
Less中文网址： http://lesscss.cn/
常见的CSS预处理器：Sass、Less、Stylus
一句话：Less 是一门 CSS 预处理语言，它扩展了CSS的动态特性。
3 Less 安装（注意如果使用vscode无需安装less）
① 安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/
② 检查是否安装成功，使用cmd命令（win10 是 window +r 打开 运行输入cmd） --- 输入“ node –v ”查看版本即可
③ 基于nodejs在线安装Less，使用cmd命令“ npm install -g less ”即可
④ 检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可
使用vscode无需安装
我们首先新建一个后缀名为less的文件， 在这个less文件里面书写less语句。
Less 变量
Less 编译
Less 嵌套
Less 运算
4 Less 变量
变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
@变量名:值;
⑴.变量命名规范
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感
@color: pink;⑵.变量使用规范
//直接使用
body{
color:@color;
}
a:hover{
color:@color;
}
示例代码：my.less
// 定义一个粉色的变量
@color: pink;
// 错误的变量名 @1color @color~@#
// 变量名区分大小写 @color 和 @Color 是两个不同的变量
// 定义了一个 字体为14像素的变量
@font14: 14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
a {
font-size: @font14;
}5.Less 编译
本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
所以，我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。
⑴.vocode Less 插件
Easy LESS 插件用来把less文件编译为css文件
安装完毕插件，重新加载下 vscode。
只要保存一下Less文件，会自动生成CSS文件。
6.Less 嵌套
我们经常用到选择器的嵌套
#header .logo {
width: 300px;
}Less 嵌套写法
#header {
.logo {
width: 300px;
}
}如果遇见 （交集|伪类|伪元素选择器）
内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；
如果有 & 符号，它就被解析为父元素自身或父元素的伪类。
a:hover{
color:red;
}Less 嵌套写法
a{
&:hover{
color:red;
}
}
7.Less 运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
/*Less 里面写*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;
注意：
乘号（*）和除号（/）的写法
运算符中间左右有个空格隔开 1px + 5
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位
四、rem 适配方案
1 rem 实际开发适配方案
① 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询） ② CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；
2. rem 适配方案技术使用（市场主流）
3.rem 实际开发适配方案
rem + 媒体查询 + less 技术
⑴.设计稿常见尺寸宽度
一般情况下,我们以一套或两套效果图适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果 现在基本以750为准｡
⑵.动态设置 html 标签 font-size 大小
① 假设设计稿是750px
② 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
③ 每一份作为html字体大小，这里就是50px
④ 那么在320px设备的时候，字体大小为320/15 就是 21.33px
⑤ 用我们页面元素的大小 除以不同的 html 字体大小会发现他们比例还是相同的
⑥ 比如我们以 750为标准设计稿
⑦ 一个100*100像素的页面元素 在 750屏幕下， 就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1
⑧ 320屏幕下， html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1
⑨ 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
⑶. 元素大小取值方法
① 最后的公式： 页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
② 屏幕宽度/划分的份数 就是 html font-size 的大小
③ 或者： 页面元素的rem值 = 页面元素值（px） / html font-size 字体大小
用一个简单的例子帮你理解这个过程：
场景设定：
- 设计稿宽度是 750px（相当于一张 A4 纸宽度）
- 我们用 15 根火柴棍来划分屏幕宽度
步骤分解：
-
基准设定：
- 750px ÷ 15 根火柴 = 每根火柴 50px
- 把 html 的字体大小设为 50px（每根火柴长度）
-
元素转换：
- 设计稿上有个按钮宽 100px → 100px ÷ 50px = 2 根火柴 → 写成 CSS 是 2rem
-
屏幕变化时：
- 当屏幕缩小到 320px（相当于半张 A4 纸）
- 320px ÷ 15 根火柴 ≈ 每根火柴 21.33px
- html 的字体大小自动变为 21.33px
-
元素自适应：
- 原来的 2rem 按钮 → 2 × 21.33px ≈ 42.66px
- 虽然按钮变小了，但宽高比例始终保持 1:1（因为都是用相同的 rem 单位）
关键点：
- 15 根火柴是固定划分标准（相当于把屏幕宽度分成等比例的份数）
- rem 单位是 "火柴数量"（不管每根火柴多长，数量不变）
- 当屏幕尺寸变化时，每根火柴长度自动缩放，元素尺寸也随之等比缩放
实际效果：
- 在 750px 屏幕：按钮是 100px×100px
- 在 320px 屏幕：按钮是 42.66px×42.66px
- 虽然大小不同，但形状保持正方形，比例不变
为什么这样设计？
- 就像用缩放仪画图，原图上的每个点都按相同比例缩放
- 只需要维护一套 rem 单位，就能适配所有屏幕尺寸
- 避免了不同屏幕下元素变形或布局错乱的问题
五、苏宁网首页案例制作
案例：苏宁网移动端首页
访问地址：m.suning.com
1. 技术选型
方案：我们采取单独制作移动页面方案
技术：布局采取rem适配布局（less + rem + 媒体查询）
设计图： 本设计图采用 750px 设计尺寸
2. 搭建相关文件夹结构
3. 设置视口标签以及引入初始化样式
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">4.设置公共common.less文件
1. 新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
2. 我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
3. 划分的份数我们定为 15等份
4. 因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为 50px，注意这句话写到最上面
5.新建index.less文件
1. 新建index.less 这里面写首页的样式
2. 将刚才设置好的 common.less 引入到index.less里面 语法如下：
// 在 index.less 中导入 common.less 文件
@import “common”3. 生成index.css 引入到 index.html 里面
6.body样式
body {
min-width: 320px;
width:15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}六、苏宁网首页案例制作-rem 适配方案2
1.简洁高效的rem适配方案flexible.js
手机淘宝团队出的简洁高效 移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html 文字大小就可以了
比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
里面页面元素rem值： 页面元素的px 值 / 75
剩余的，让flexible.js来去算
github地址：https://github.com/amfe/lib-flexible
2. 技术选型
方案：我们采取单独制作移动页面方案
技术：布局采取rem适配布局2（flexible.js + rem）
设计图： 本设计图采用 750px 设计尺寸
3.搭建相关文件夹结构
4.设置视口标签以及引入初始化样式还有js文件
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">我们页面需要引入 这个js文件
在 index.html 中 引入 flexible.js 这个文件
<script src=“js/flexible.js”> </script>5.body样式
body {
min-width: 320px;
width:15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}6.VSCode px 转换rem 插件 cssrem
这是一个神奇的插件
