1. rem 基础
rem 是一个相对单位，类似于 em ，em 是父元素字体大小。
em 是相对于父元素 的字体大小来说的
rem 是相对于 html 元素 字体大小来说的
rem 优点 就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制
比如：根元素（html ）设置的 font-size=12px；非根元素设置 width：2rem；则换成px 表示 24px（12px*2rem）
2. 媒体查询（@media）
@media 可以针对不同的屏幕尺寸设置不同的样式
语法规范：
@media mediatype and | not | only (media feature){
CSS - Code;
}
- 用 @media 开头
- mediatype 媒体类型
all：用于所有设备，
print：用于打印机和打印预览，
screen：用于电脑屏幕，平板电脑，手机等
- 关键字 and not only
and：可以将多个媒体特性连接到一起，相当于“且”的意思
not：排除某个媒体类型，相当于“非”的意思，可以省略
only：指定某个特定的媒体类型，可以省略
- media feature 媒体特性 必须有小括号包含
width：定义输出设备中页面可见区域的宽度
max-width：定义输入设备中页面最大可见区域宽度
min-width：定义输入设备中页面最小可见区域宽度
案例：
@media screen and（max-width：500px）{
body{
background:pink;
}
}
注意点：
1. screen 还有 and 必须带上，不能省略
2. 小括号中的 数字 后面必须跟单位，970px 这个 px 不能省略
3. 媒体查询最好的方法就是从小到大
3. 媒体查询 + rem 实现元素动态大小变化
rem 单位是跟着 html 来走的，有了 rem 页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询 + rem 就可以实现不同设备宽度，实现页面元素大小的动态变化
4. 引入资源（理解）
当样式比较繁多的时候，可以针对不同的媒体使用不同 stylesheet（样式表）。
原理，直接在 link 中判断设备的尺寸，然后引入不同的css文件。
语法规范：
<link rel = "stylesheet" media = "mediatype and | not | only (media feature)" href = " style.css" >
案例：
<link rel = "stylesheet" media = "screen and （min-320px）" href = " style320.css" >
<link rel = "stylesheet" media = "screen and （min-640px）" href = " style640.css" >
5. Less基础
Less 变量：变量是指没有固定的值，可以改变的，因为CSS中的一些颜色和数值等经常使用，样式后缀名.less 。
@变量名：值；
1. 变量名规范
- 必须有 @ 为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
案例：
@color：pink；// 定义变量
body{
color：@color； // 使用变量
}
2. 编译
通过vscode中的插件 Easy LESS 编译为 css 文件，只要保存一下 Less 文件，会自动生成 CSS文件
3. Less 嵌套
1.内层选择器的前面没有 & 符号，则它被解析为父选择器的后代
CSS中选择器嵌套：
#header .logo{
10px;
}
Less 嵌套写法：
#header{
.logo{
10px;
}
}
2. 如果有 & 符号，它就被解析为父元素自身或父元素的伪类（交集|伪类|伪元素选择器）
CSS中选择器嵌套：
a:hover{
color:red;
}
Less 嵌套写法：
a{
&：hover{
color:red;
}
}
3.Less 运算
less 中运算 可以使用 加（+），减（-），乘（*），除（/）四种运算
运算符中间左右有个空格隔开 1px + 5
对于两个值之间只有一个值有单位，则运算结果就取该单位
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
案例：
@font：50px；
@border：5px +5；
div{
width：200px - 50；
height：200px * 2；
border：@border solid #ccc;
img{
82rem / @font; //1.65rem
}
}
6.rem 两种适配方式
技术方案1 ：less + 媒体查询 + rem
技术方案2：flexible.js + rem（推荐）
方式一：（rem + less + 媒体查询）
1.动态设置 html 标签 font-size 大小
① 假设设计稿是 750px
② 假设整个屏幕划分为 15 等分（划分标准不一，可以是20份，也可以是10份）
③ 每一份作为 html 字体大小，这里就是 50px
④ 在320px 设备的时候，字体大小为 320 / 15 就是21.33px
⑤ 用页面元素的大小 除以不同的 html 字体大小 会发现他们的比例还是相同的
⑥ 比如 以 750px 为标准设计稿
⑦ 一个 100*100像素的页面元素在 750 屏幕下，就是 100 / 50 转换为 rem 是 2rem * 2rem 比例是1:1
⑧ 320 屏幕下，html字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是1:1
⑨ 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果。
原理总结：先拿一个标准的稿件（750px）来算出 rem 值，剩下的屏幕，只要把html的文字大小的值算出来，就可以等比例缩放。
算法：（元素大小取值方法）
① 最后的公式：页面元素的 rem 值 = 页面元素（px） / （屏幕宽度 / 划分的份数）；// 100px / ( 750px / 15 )；
② 屏幕宽度 / 划分的份数 就是 html font-size 的大小
③ 或者 ： 页面元素的 rem 值 = 页面元素值（px）/ html font-size 字体大小
2. import 导入样式
语法：
@import “common”； // 在新的 index.less 中 导入 common.less 文件
注意：
@import 导入的意思，可以把一个样式文件导入到另外一个样式文件里面
link 是把一个 样式文件引入到 html 页面里面
7. 方式二：（flexible.js + rem 适配）
1. 插件安装（cssrem）
1. VSCode 安装 cssrem 插件，可以实现 px 转换为 rem 的操作
2. 设置 —>setting.json —> cssroot 把字体大小设置为 75（因为稿件是750px，有划分了10等份）
3. 保存 重启 VSCode
2. 简洁高效的 rem 适配方案 flexible.js
手机淘宝团队出的简洁高效 移动端适配库
再也不需要写不同屏幕的媒体查询，因为里面 js 做了处理
他的原理是把当前设备划分为 10 等份，但是不同设备下，比例还是一致的
我们要做的，就是确定好我们当前设备的html文字大小就可以
比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px（750px / 10）就可以
里面页面元素 rem 值：页面元素的px值 / 75
剩余的，让 flexible.js 来计算
3. 需要强制设定屏幕超过750px ，就按照 750px 的设计稿来设计，不会让页面超过 750px
@media screen and （min-width：750px）{ // 屏幕大于等于750px 的情况下
html{
font-size：75px !important; //提升权重
}
}