一、移动适配
手机的设备不同，会导致写出来的页面出现显示大小错误，解决方案
rem ： 目前多数企业在用的解决方案
vw / vh：未来的解决方案
长度单位rem
屏幕宽度不同，网页元素尺寸不同（等比缩放）
rem单位
相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
Snipaste_2022-04-07_20-26-22.png
适配移动端过程：
1.要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10
2.页面元素就可以使用rem相对单位，1rem=1html文字大小
rem单位尺寸
- 根据视口宽度，设置不同的HTML标签字号
- 书写代码，尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字号
Snipaste_2022-04-07_20-30-10.png
二、less语法
Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
less注释：
单行注释
语法：// 注释内容
快捷键：ctrl + / l 块注释
语法：/* 注释内容 */
快捷键： shift + alt + A
使用Less嵌套写法生成后代选择器
Snipaste_2022-04-07_20-33-03.png
less变量
把颜色提前存储到一个容器，设置属性值为这个容器名 l 变量：存储数据，方便使用和修改。 l 语法：
定义变量：@变量名: 值;
使用变量：CSS属性：@变量名;
Snipaste_2022-04-07_20-34-25.png
使用Less导入写法引用其他Less文件
CSS：书写link标签
Less：导入 @import “文件路径”;
Snipaste_2022-04-07_20-35-43.png
控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
1 // out: ./css/
1 // out: ./css/common.css
禁止导出
在less文件第一行添加: // out: false
