一，rem
1，em单位
em: 相对单位，参考的是父级元素的字号大小的倍数，如果是 2em 表示字号的2倍；
也就是当我们给父级盒子设置为font-size：20px；那么子盒子的的10em就为200px
2.rem单位
rem(root em)是一个相对单位，类似于 em，em 是父元素字体大小。不同的是 rem 的基准是相对于 元素的字体大小比如，根元素 (html)设置 font-size=12px; 非根元素设置 width:2rem; 转换成 px 表示就是 24px。
rem 的优势: 父元素文字大小可能不一致，但是整个页面只有一个 ，可以很好的来控制整个页面的元素大小比例
二，媒体查询
1，媒体查询语法
媒体查询: @media 媒体类型 关键字 媒体特性；
语法规范：用 @media 开头注意@符号mediatype 媒体类型，关键字 and not only，media feature 媒体特性 必须有小括号包含
media mediatype and|not|only (media feature) {
css-code
}
2，@media
媒体查询 (Media Query) 是CSS3新语法。
使用 @media 查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面,目前针对很多苹果手机、安卓手机，平板等设备都用得到的媒体查询
3，mediatype 媒体类型
将不同的终端设备划分成不同的类型，称为媒体类型
| 值 | 解释说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等 |
4，关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
1，and:可以将多个媒体特性连接到一起，相当于“且”的意思。
2，not: 排除某个媒体类型，相当于“非”的意思，可以省略。
3，or: 可以测试多个媒体查询的条件，只要有一个条件成立，就执行，“或”的意思
4，only: 指定某个特定的媒体类型，可以省略。
5，媒体特性
每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格我们暂且了解三个。 注意他们要加小括号进行包含
| 值 | |
|---|---|
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域宽度 |
| max-width | 定义输出设备中页面最大可见区域宽度 |
6，案例
q：设置一个媒体查询 1，屏幕小于等于 539px 时，背景为蓝色 2.屏幕大于等于540px 并且 小于等于 969px 时，背景为绿色 background-color: green; 3.屏幕大于等于 970px 时，背景为红色
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
@media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
}
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
他们分为三段式，分别负责每段区间，如果我们想简化代码也可以这样书写，第三段代码层叠掉了第二段代码的后半部分
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
三，媒体查询+rem小案例
媒体查询+rem实现元素动态大小变化，rem单位是跟着 来走的，有了 rem 页面元素可以设置不同大小尺寸媒体查询可以根据不同设备宽度来修改样式
媒体查询 + rem 就可以实现不同设备宽度，实现页面元素大小的动态变化
<style>
@media screen and (max-width:640px) {
html {
font-size: 20px;
}
}
@media screen and (min-width:640px) {
html {
font-size: 30px;
}
}
.box {
width: 100%;
height: 3rem;
background-color: green;
line-height: 3rem;
text-align: center;
font-weight: bold;
color: #fff;
}
</style>
<body>
<div class="box">
购物车
</div>
</body>
四，媒体查询文件引入
引入资源(理解),当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets (样式表)原理，就是直接在 中判断设备的尺寸，然后引用不同的 css 文件
1.语法规范
<link rel="stylesheet" media="mediatype and not only (media feature)" href="mystylesheet.css">
2,示例
<link rel="stylesheet" href="css/style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="css/style640.css" media="screen and (min-width:640px)">
五，less
1,css 的弊端
CSS 是一门非程序式语言，没有变量、函数、SCOPE (作用域)等概念,CSS 需要书写大量看似没有逻辑的代码，CSS 余度是比较高的,不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力,往往会因为缺少 CSS 编写经验而很难写出组织良好且非前端开发工程师来讲，易于维护的 CSS 代码项目
2,less安装
3，less使用
3.1 Less 变量
我们首先新建一个后缀名为 .less的文件，在这个.less 文件里面书写 Less 语句
变量是指没有固定的值，可以动态改变的。因为我们 CSS 中的一些颜色和数值等经常使用 @变量名:值;
变量命名规范
1.必须有@为前缀 2,不能包含特殊字符 3,不能以数字开头 4,大小写敏感
@color:pink;
变量使用规范
//直接使用
body {
color: @color;
a:hover!
color: @color;
}
3.2 Less 编译
1,cmd编译
本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式这些规则最终会通过解析器，编译生成对应的 CSS 文件。
所以，我们需要把我们的.less文件，编译生成为 .css 文件，这样我们的 html 页面才能使用 推荐方法 (nodejs) : 在当前文件夹，使用 cmd 命令"lessc style.less > style.css"
2，vscode插件自动编译
3.3Less 嵌套
如果遇见 (交集|伪类|伪元素选择器)
1，内层选择器的前面没有 & 符号，则它被解析为父选择器的后代;如果有 &符号，它就被解析为父元素自身或父元素的伪类
nest.less文件
.boos {
width: 1000px;
height: 200px;
background-color: aqua;
a {
display: block;
width: 100px;
height: 100px;
background-color: rgb(125, 26, 61);
&.box2 {
display: block;
width: 100px;
height: 100px;
background-color: rgb(189, 22, 150);
}
&:hover {
background-color: yellow;
transition: all 1s linear .5s;
}
}
}
<body>
<div class="boos">
<a href="#" class="box1"></a>
<a href="#" class="box2"></a>
</div>
</body>
3.4 Less 运算
Less 提供了加 (+) 、减 (-)、乘 (*) 、除。任何数字、颜色或者变量都可以参与运算。 (/)算术运算。
1.参与运算的两个数字，可以一个有单位，一个没有单位，最终单位就是唯一的那个单位 2. 参与运算的两个数字，两个都有单位，最终单位取第一个教字的单位 3.Less的运算符左右必须加空格
.boos {
width: 300rem / @baseFont;
height: 100px + 5;
background-color: red;
}
