一、长度单位
（一）rem
目标：能够使用rem单位设置网页元素的尺寸
1、认识rem的功能
（1）网页效果
屏幕宽度不同，网页元素尺寸不同（等比缩放）
（2）px单位或百分比布局可以实现吗？
px单位是绝对单位
百分比布局特点宽度自适应，高度固定
（3）适配方案
<1>rem
<2>vw / vh
2、rem单位
（1）相对单位
（2）rem单位是相对于HTML标签的字号计算结果
（网页的根标签，HTML 网页的根是HTML标签，HTML标签的字号也称为根标签）
（3）1rem = 1HTML标签字号大小
（4）rem开发流程：
<1>html标签加字号
<2>写尺寸，rem单位
/* 1rem = 1html标签字号大小 */
html{
font-size: 20px;
}
.box{
width: 5rem;
height: 3rem;
background-color: pink;
}
3、rem移动适配- 媒体查询
目标：能够使用媒体查询设置差异化CSS样式
（1）媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
（2）写法：
<style>
/* 使用媒体查询，根据不同的视口宽度，设置宽度不同的根字号 */
@media(width:375px){
html{
font-size: 40px;
}
}
@media(width:320px){
html{
font-size: 30px;
}
}
</style>
4、rem移动适配
目标：能够使用rem单位设置网页元素的尺寸
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
5、rem适配原理
目标：实现在不同宽度的设备中，网页元素尺寸8等比缩放*效果
（1）rem单位尺寸
1、根据视口宽度，设置不同的HTML标签字号
2、 书写代码，尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字号
/* 1、HTML标签添加字号 1/10； 2、写rem单位的尺寸 */
@media (width:375px){
html{
font-size: 37.5px;
}
}
/* 2、书写盒子尺寸，单位rem */
.box{
/* 68 * 29 */
/* width:68px; */
/* 设计稿375，HTML37.5 68/37.5*/
width: 1.813rem;
height: 0.773rem;
background-color: pink;
}
6、flexible
目标：使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
（1）flexible.js是手淘开发出的一个用来适配移动端的js框架。
（2）核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
二、Less
1、Less简介
目标：使用Less运算写法完成px单位到rem单位的转换
（1）思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的？
答：除法运算。CSS不支持计算写法。
解决方案：可以通过Less实现。
（2）目标：使用Less语法快速编译生成CSS代码
Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
2、编译插件
目标：使用Less语法快速编译生成CSS代码
Easy Less :
vscode插件
作用：less文件保存自动生成css文件
3、注释：
<1>单行注释(无法生成到css中)
语法：// 注释内容
快捷键：ctrl + /
<2>块注释
语法： /* 注释内容 */
快捷键： shift + alt + A
4、使用Less运算写法完成px单位到rem单位的转换
<1>运算：
加、减、乘直接书写计算表达式
除法需要添加 小括号 或 .
<2>注意：
表达式存在多个单位以第一个单位为准
5、使用Less嵌套写法生成后代选择器
6、使用Less变量设置属性值
（1）变量
思考：
网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？
方法一：逐一修改属性值（太繁琐）
方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名
（2）方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名
变量：存储数据，方便使用和修改。
语法：
定义变量：@变量名: 值;
使用变量：CSS属性：@变量名;
// 1、定义 2、使用
@colora:pink;
.box{
color: @colora;
}
7、Less-导入
目标：能够使用Less导入写法引用其他Less文件
（1）思考：开发网站时，网页如何引入公共样式？
CSS：书写link标签
Less：导入
（2）导入: @import “文件路径”;
8、Less-导出
（1）方法一：
配置EasyLess插件， 实现所有Less有相同的导出路径
配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
（2）方法二：控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
9、Less-禁止导出
禁止导出：
在less文件第一行添加: // out: false
（续）一、长度单位
（二）vw/vh
目标：能够使用vw单位设置网页元素的尺寸
1、vw/vh
（1）相对单位
（2）相对视口的尺寸计算结果
（3）vw：viewport width
1vw = 1/100视口宽度
（4）vh：viewport height
1vh = 1/100视口高度
2、vw适配原理
目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
（1）vw单位尺寸
<1>确定设计稿对应的vw尺寸 （1/100视口宽度）
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）
<2>vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
3、vh适配原理
目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
（1）vh单位尺寸
<1>确定设计稿对应的vh尺寸 （1/100视口高度）
查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）
<2> vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )
4、思考：开发中，会不会vw和vh混用呢？
不会。
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。
网友评论