> **移动适配**指网页元素的宽高都要随着设备的宽度**等比例缩放**
> **解决方案：**
>
> 0. `rem ：`目前多数企业在用的解决方案 （尺寸单位）
> 0. `vw / vh：`未来的解决方案
## rem是什么
> 0. rem是一个**相对单位**
>
> 0. 是相对于HTML标签的字号计算结果
>
> 0. 1rem=1HTML标签字号大小
>
> - 比如：HTML标签字号大小为`font-size：20px`则1rem=20，5rem=5*20=100px
> - HTML网页*根标签*就是html标签
> ```
>
> /* 1rem = 1html标签字号大小 */
>
> html {
> font-size: 20px;
> }
>
> .box {
> width: 5rem;
> height: 3rem;
> background-color: blue;
> }
> ```
>
> *效果图：5rem=5 * 20 , 3rem=3 * 20*
>
>
## rem移动适配 - 媒体查询
> *使用媒体查询, 根据不同的**视口宽度**(设备宽度), 设置不同的根字号*
> 目标：能够使用媒体查询设置差异化CSS样式
> - **媒体查询能够检测视口的宽度**，然后编写差异化的 CSS 样式
> - 当某个条件成立, 执行对应的CSS样式
>
>
> 目前rem布局方案中，将网页 **(设计稿)** 等分成10份， HTML标签的字号为视口宽度的 1/10
## 计算rem
> 0. 先确定设计稿的尺寸
> - N * 37.5 = 68 → N = 68 / 37.5
> - rem单位的尺寸 = px单位数值 / 基准根字号 (结果取3位小数)
## rem适配原理(重要)
> **目标：** *实现在不同宽度的设备中，网页元素尺寸等比缩放效果*
> **rem单位尺寸**
>
> 0. 根据视口宽度，设置不同的HTML标签字号
>
> 0. 书写代码，尺寸是rem单位
>
> - 确定设计稿对应的设备的**HTML标签**(基准根字号)字号
>
> - 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
>
> - **rem单位的尺寸**
>
> - N * 37.5 = 68 → N = 68 / 37.5
> - rem单位的尺寸 = px单位数值 / 基准根字号
>
> - *rem单位的尺寸 = px单位数值 / 基准根字号 (结果取3位小数)*
## flexible.js
> - flexible.js是手淘（淘宝）开发出的一个用来适配移动端的js框架。
> - **核心原理**就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
## less
> 目标：使用Less语法快速编译生成CSS代码
> - Less是一个CSS预处理器, Less文件后缀是.less
> - 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
> - *注意：*浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
### less语法(运算)
> - 加、减、乘直接书写计算表达式
> - 除法需要添加 小括号 或 . **（建议用小括号）**
> - 注意：表达式存在多个单位以第一个单位为准
>
>
### less语法(嵌套)
> 能够使用Less嵌套写法生成后代选择器
>
> **方便代码迁移**
>
> 最好不要超过三层嵌套
>
> *注意：*&符号不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
### less语法(变量)
> 目标：能够使用Less变量设置属性值
>
> 作用：存储数据
>
> *方便修改*：例如网页有1000个颜色，只要修改变量值即可
> **方法：**
>
> - 把颜色提前存储到一个容器，设置属性值为这个容器名
>
> - 变量：存储数据，**方便使用和修改。**
>
> - 语法：
>
> - 定义变量： **@变量名: 值;**
> - 使用变量：**CSS属性：@变量名;**
### less语法(导入)
> 目标：能够使用Less导入写法引用其他Less文件
> 导入: **@import “文件路径”;**
>
>
### less语法(导出)
> 目标：使用Less语法导出CSS文件
>
> *注意：*添加代码的时候加上逗号
> **(插件配置)方法：**
>
> - 配置EasyLess插件， 实现所有Less有相同的导出路径
> - 配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
>
> **单独路径**：
>
> - Less文件**第一行**添加如下代码, 注意文件夹名称后面添加 /
>
> - `// out: ./abc/`
> - 注意要在第一行添加
### 禁止导出
> 在less文件*第一行*添加: `// out: false`
