移动适配
01.长度单位
①Rem
目标：能够使用rem单位设置网页元素的尺寸
l rem单位
Ø 相对单位
Ø rem单位是相对于HTML标签的字号计算结果
Ø 1rem = 1HTML字号大小
rem移动适配 -媒体查询
目标：能够使用媒体查询设置差异化CSS样式
写法：
rem适配原理
目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
l rem单位尺寸
- 根据视口宽度，设置不同的HTML标签字号
- 书写代码，尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
Ø 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
Ø N * 37.5 = 68 → N = 68 / 37.5
Ø rem单位的尺寸 = px单位数值 / 基准根字号
flexible
目标：使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
l flexible.js是手淘开发出的一个用来适配移动端的js框架。
l 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
②Less
目标：使用Less语法快速编译生成CSS代码
l Less是一个CSS预处理器, Less文件后缀是.less
l 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
l 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
编译插件
目标：使用Less语法快速编译生成CSS代码
Easy Less :
l vscode插件
l 作用：less文件保存自动生成css文件
注释：
l 单行注释
Ø 语法：// 注释内容
Ø 快捷键：ctrl + /
l 块注释
Ø 语法：/* 注释内容 */
Ø 快捷键： shift + alt + A
⑴Less计算：+ - * 除法./或者()
⑵Less嵌套写法：（左边Less，右边CSS）
1.生成后代选择器
2.生成子代选择器 >
3.交集选择器 &符号指代的是直接上级
4.并集选择器
5.伪类选择器 :hover
6.添加伪元素
7.结构伪类选择器 直接写在选择器的后面是没有提示的
⑶Less变量：
目标：能够使用Less变量设置属性值
变量
l 方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名
l 变量：存储数据，方便使用和修改。
l 语法：
Ø 定义变量：@变量名: 值;
Ø 使用变量：CSS属性：@变量名;
⑷Less导入：
目标：能够使用Less导入写法引用其他Less文件
⑸Less导出：
目标：使用Less语法导出CSS文件
⑹Less禁止导出：
//out: false
⑺Less压缩导出：
// compress:true,out:../css2/
