目标：使用 rem 和 less 完成移动端的布局。
一、移动 Web 基础
1、谷歌模拟器
在网页右键点“检查”或快捷键 F12，然后右边栏顶部第二个按钮切换设备为移动端，刷新网页，可以看到谷歌模拟器，可以切换模拟器型号、尺寸、百分比等操作。
2、屏幕分辨率
分类：
-
物理分辨率：指屏幕上实际拥有的像素点数，通常用水平像素数和垂直像素数来表示，比如常见的 1920×1080。它是屏幕本身的固有属性，不会随其他因素而改变。物理分辨率决定了屏幕显示图像的清晰度和细腻程度，物理分辨率越高，显示的图像就越清晰、精细。
-
逻辑分辨率：可以理解为软件层面上设定的分辨率。它是系统或应用程序所使用的分辨率设定。通过调整逻辑分辨率，可以在不改变物理分辨率的情况下，改变屏幕上显示内容的大小和布局。例如，在一部手机上，其物理分辨率是固定的，但用户可以根据自己的喜好在系统设置中调整逻辑分辨率，让图标和文字显示得更大或更小。
结论：制作网页参考逻辑分辨率，因为我们希望我们设计移动端网页根据不同的手机分辨率、或用户设置手机分辨率而展示不同的尺寸，即适配手机分辨率。
3、视口
作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口标签：规定HTML的尺寸，让HTML的宽度 = 逻辑分辨率的宽度/设备的宽度 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
- 快捷键 !回车，生成 html 骨架的时候会自动生成视口标签，有了这句代码，html 的宽度会等于设备的宽度
- width=device-width：视口宽度 = 设备宽度
- initial-scale=1.0：缩放1倍（不缩放）
4、二倍图
目前开发移动端项目，设计师参考的尺寸以 iphone6/7/8 即 375 * 667 为主流尺寸。但是随着手机手机分辨率越来越高，如果还以 375 * 667 的尺寸设计和切图，图标在高分辨率屏幕下会模糊失真。所以设计师会给二倍图，即设计稿的尺寸是 750 * 1334，是 375 * 667 的二倍。
如果我们拿到设计稿，设计稿的宽度是 750，那这就是二倍图，不能按照上面的尺寸直接布局，需要进行下面操作：
（1）设计稿是 psd 文件，使用像素大厨软件，切换设计图倍数为 2x。
（2）设计稿是 html 文件，双击打开，在浏览器中网页右上角设置图标，修改像素密度为 @2x。
通过上面操作，设计稿宽度尺寸就会变成 375，我们按照设计稿的尺寸正常布局就可以了。
5、适配方案
-
宽度适配：宽度自适应，一般用于 pc 端开发
- 百分比布局
- Flex 布局
-
等比适配：宽高等比缩放，一般用于移动端开发
- rem
- vw
二、rem
1、简介
- rem 单位，是相对单位
- rem 单位是相对于 HTML 标签的字号（font-size）计算结果
- 1rem = 1HTML 字号大小
- 谷歌浏览器默认 1rem = 16px
<head>
<title>rem基本使用</title>
<style>
/* 1. 给HTML标签加字号，此时 1rem = 30px */
html {
font-size: 30px;
}
/* 2. 使用rem单位书写尺寸 */
.box {
width: 5rem;
height: 3rem;
background-color: pink;
}
</style>
</head>
2、媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式，当某个条件成立，执行对应的CSS样式。
/* 当宽度等于 320px 时，背景颜色设置为绿色 */
@media (width:320px) {
html {
background-color: green;
}
}
3、rem 布局
核心思路：目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。
<head>
<style>
/* 1. 使用媒体查询，给不同视口的屏幕设置不同的HTML字号 */
@media (width:320px) {
html {
font-size: 32px;
}
}
@media (width:375px) {
html {
font-size: 37.5px;
}
}
@media (width:414px) {
html {
font-size: 41.4px;
}
}
/* 2. 使用rem单位书写尺寸 */
.box {
width: 5rem;
height: 3rem;
background-color: pink;
}
</style>
</head>
这样就能根据屏幕不同的逻辑像素，动态修改 font-size，即动态修改了 rem 的值，元素又使用 rem 单位进行布局，最终实现显示效果（如：图片的大小、文字的字号等）在不同像素下展示的效果不同，即屏幕适配。
上面的代码只是 rem 布局的核心思路。但如果实际开发中写这么多 @mdeia 来适配屏幕尺寸，不太现实。所以实际开发中，如果使用 rem 布局方案，还需要配合使用 flexible.js 。
4、flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。核心思路也是将视口等分成 10 份，1rem 就是 1 份。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。通俗的讲，就是这个 js 库自动帮我们设置了 html 的 font-size 值，即 rem 的值。
<body>
<div class="box"></div>
<!-- 引入 flexible.js -->
<script src="./js/flexible.js"></script>
</body>
5、rem 移动适配
根据设计稿 px 尺寸转换成 rem 尺寸
- 确定基准根字号
-
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）。
-
目前，设计稿大部分都是 375 尺寸的，所以基准根字号是 37.5（二倍图通过修改，也可以转换成 375 尺寸，当然要以设计给的尺寸为准，比如如果设计师给的设计稿宽度是420，那么基准跟字号就是 42）。
- rem 单位的尺寸
-
rem单位的尺寸 = px单位数值 / 基准根字号
-
rem 单位尺寸 = px 单位数值 / 37.5
三、less
1、安装 Easy LESS
上面讲解了怎么根据设计稿的 px 尺寸转换成 rem 尺寸，了解计算原理即可，实际开发中如果每个尺寸都这么计算，太影响开发效率了。下面讲解 VSCode 的 Easy LESS 插件提高开发效率。
Less 是一个 CSS 预处理器, Less 文件后缀是 .less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件。
VS Code 插件：Easy LESS，保存 less 文件后自动生成对应的 CSS 文件。
安装好 Easy LESS 后，创建一个 .less 文件，在里面写 css 代码，宽高可以写成数学计算表达式，点击保存后会自动生成 .css 文件，在 html 中引入生成的 css 文件。
2、注释
-
单行注释
- 语法：// 注释内容
- 快捷键：ctrl + /
- Mac 电脑是 Command + /
-
块注释
- 语法：/* 注释内容 */
- 快捷键： Shift + Alt + A
- Mac 电脑是 Option + Shift + A
3、运算
- 加、减、乘直接书写计算表达式
- 除法需要添加 小括号 或 .
- 表达式存在多个单位以第一个单位为准
.box {
width: 100 + 20px;
width: 100 - 80px;
width: 100 * 2px;
// 除法 / → (计算表达式) 或 ./ → 推荐（）
width: (68 / 37.5rem);
// 出现红线, 并且提示报错, 但照样能计算出结果
// width: 37.5 ./ 37.5rem;
// 如果表达式有多个单位，最终 css 里面以第一个单位为准，结果是 0.77333333px;
height: (29px / 37.5rem);
}
4、嵌套
作用：快速生成后代选择器。
提示：用 & 表示当前选择器，不会生成后代选择器，通常配合伪类或伪元素使用。
less 文件的代码：
.father {
color: red;
.son {
width: 200px;
a {
color: green;
// & 表示的是当前选择器，代码写到谁的大括号里面就表示谁, 不会生成后代选择器
// 应用：配合hover伪类或nth-child结构伪类使用
&:hover {
color: blue;
}
}
// 虽然也能实现 hover 效果, 但是习惯使用 &, 代码都在 a {} 里面, 便于以后阅读维护
// a:hover {
// color: orange;
// }
}
}
生成的 css 代码：
.father {
color: red;
}
.father .son {
width: 200px;
}
.father .son a {
color: green;
}
.father .son a:hover {
color: blue;
}
5、变量
概念：容器，存储数据。
作用：存储数据，方便使用和修改。
语法：
- 定义变量：@变量名: 数据;
- 使用变量：CSS属性：@变量名;
// 定义变量
@myColor: pink;
// 使用变量
.box {
color: @myColor;
}
a {
color: @myColor;
}
6、导入
作用：导入 less 公共样式文件。
语法：@import "文件路径"; 。
提示：如果是 less 文件可以省略后缀。
@import './base.less';
@import './common';
7、导出
写法：在 less 文件的第一行添加 // out: 存储URL。
提示：
- 导出路径只有写在第一行才起作用
- 文件夹名称后面添加 /
- 如果没有指定 css 的路径和名字，默认创建一个和 less 同级且同名的 css 文件，如果要创建的 css 名字和 less 名字一样，路径中可以省略 css 的名字，路径是
文件夹/结尾，/不能省。
// out: ./14-mycss/index.css
// 导出 css 路径写在第一行才起作用, 否则不生效
// 定义变量
@myColor: pink;
.father {
background-color: @myColor;
}
// 导出路径是：同文件夹下的 css 文件夹内，创建一个和 less 文件名字一样的 css 文件
// 如果没有指定 css 的名字和路径，默认创建一个和 less 同名且同级的 css 文件
// 但是不起作用, 只有在第一行才起作用，
// out: ./css/
.son {
background-color: #fff;
}
// 不起作用, 只有在第一行才起作用
// out: ./index.css
8、禁止导出
写法：在 less 文件第一行添加: // out: false 。
// out: false
// 禁止导出 css 文件, 写在第一行才起作用
四、综合案例
通过今日所学，使用 rem 完成如下移动端页面布局：
想要完整代码的，点击这里获取Day12综合案例完整代码。完全免费，仅供学习参考使用。
410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
