rem单位
效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）
与px单位或百分比布局对比：
- px单位是绝对单位
- 百分比布局特点宽度自适应，高度固定
- rem单位是相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
例：html中字体尺寸为 20px，盒子宽度为 5rem，则最后显示的盒子宽度为 100px。
媒体查询
使用媒体查询设置差异化CSS样式，媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式，当某个条件成立, 执行对应的CSS样式。
写法：
代码语言：javascript复制 @media (width:375px) {
html {
font-size: 40px;
}
}意思：当检测到视口的宽度为 375px时，html的字号大小为 40px。
作用：可以使用媒体查询, 根据不同的视口宽度, 设置不同的根字号。
设备宽度不同，HTML标签字号设置：
- 设备宽度大， 元素尺寸大
- 设备宽度小，元素尺寸小
目前在rem布局方案中，将网页分成10份，HTML标签的字号为视口宽度的1/10，可以便于计算。
等比缩放
实现在不同宽度的设备中，网页元素尺寸等比缩放效果
在工作中，书写代码的尺寸要参照设计稿尺寸，通常设计稿给出的尺寸是px，我们需要通过计算来得到rem的值。
像素尺寸转换rem：
1.根据视口宽度，设置不同的HTML标签字号
2.确定设计稿对应的设备的HTML标签字号
- 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
3.得出rem单位的尺寸，并书写代码
- rem单位的尺寸=px单位数值/基准根字号
*例：计算68px是多个rem？（*假定设计稿适配375px视口）
理解：设备宽度为 375px，则基准跟字号为 37.5px，rem值=68/37.5
公式： N*37.5=68 → N=68/37.5
flexible.js
可以使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果。
flexible.js是手淘开发出的一个用来适配移动端的js框架，核心原理就是根据不同的视口宽度给网页中html根节点设置不同的 font-size。
flexible.js引用：
代码语言：javascript复制<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>less语法
使用less语法快速编译生成css代码。
less语法是一个CSS预处理器，less文件后缀是.less。扩充了css语言，使css具备一定的逻辑性和计算能力。
注意：浏览器不识别less代码，目前阶段，网页需要引入的还是对应的css文件。
运算：完成px单位到rem单位的转换
加减乘直接书写计算表达式。
除法需要添加小括号或.
代码语言：javascript复制width:(68px/37.5rem)
width:68px./37.5rem注意：开发中除法计算通常使用小括号。
嵌套：快速生成后代选择器。
注：&表示当前选择器，不生成后代选择器，通常配合伪类或伪元素使用。
变量：存储数据，方便使用和修改。
1.定义变量：@变量名:值;
2.使用变量：css属性:@变量名;
导入：引用其他less文件
@import '文件路径';
如果是less文件，可以省略后缀。
导出：导出CSS文件
- 全部导出：插件配置 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
- 单独导出：
// out : ./abc/ - 禁止导出：
//out :false
vw / vh
实现在不同宽度的设备中，网页元素尺寸等比缩放的效果。
相对视口的尺寸计算结果：
- vw：viewport width 1vw = 1/100视口宽度
- vh：viewport height 1vh = 1/100视口高度
尺寸确定
- 确定设计稿对应的
vw尺寸（1/100视口宽度）/vh尺寸（1/100视口高度）
- 查看设计稿宽度
- 确定参考设备宽度（视口宽度）/设备高度 (视口高度)
- 确定
vw尺寸（1/100视口宽度）/vh尺寸（1/100 视口高度）
- vw单位的尺寸=px单位数值/（1/100视口宽度）
注：在开发中，vw和 vh不会混用，因为 vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。
rem是目前多数企业在用的解决方案，但需要不断修改html文字大小，需要媒体查询media，需要flexible.js，而vw/vh是未来的解决方案，省去各种判断和修改。
