文章目录
一：rem
1：rem (root em)是一个相对单位，类似于em，
em是父元素字体大小。
rem的基准是相对于html元素的字体大小。
比如:
根元素（html）设置font-size=12px;
非根元素设置width:2rem;
则换成px表示就是24px。
【叽叽歪歪】
把页面中所有表示大小的单位都换成rem
把对应的设备宽度中设置一个合适的html标签的字体大小
二：媒体查询 Media Query
@media 可以针对不同的屏幕尺寸设置不同的样式
使用 @media 查询，可以针对不同的媒体类型定义不同的样式
/* 括号里的汉字仅做解释，与代码无关 */
@media mediatype（类型） and|not|only（关键字） (media feature)（媒体类型） {
CSS-Code;
}
2.1：类型
将不同的终端设备划分成不同的类型，称为媒体类型
| 属性 | 描述 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| scree | 用于电脑屏幕，平板电脑，智能手机等 |
2.2：关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
| 属性 | 描述 |
|---|---|
| and | 可以将多个媒体特性连接到一起，相当于“且”的意思。 |
| not | 排除某个媒体类型，相当于“非”的意思，可以省略。 |
| onl | 指定某个特定的媒体类型，可以省略。 |
2.3：媒体特性
加小括号包含
| 属性 | 描述 |
|---|---|
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域宽度 ， ≥ ，大于等于 |
| max-width | 定义输出设备中页面最大可见区域宽度， ≤ ，小于等于 |
三：rem+媒体查询
rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化
- 把
<html></html>…写进@media screen …里面 - 引入资源
语法规范
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
四：less使用(建新文件，后缀.less)
Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为CSS预处理器。
4.1：less的变量
@变量名:值;
命名规则：
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
4.2：less的编译
本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则
最终会通过解析器，编译生成对应的 CSS 文件。
【叽叽歪歪】就是说建一个.less的文件，然后在里面写东西，保存的时候，软件会自动生成一个.css的同名文件。（有个插件）
☇Easy LESS 插件
.less→.css(转)→.html(引)
4.3：less嵌套
子元素样式直接写进父亲的 {} 里面
如果遇见 （交集|伪类|伪元素选择器）
- 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；
- 如果有 & 符号，它就被解析为父元素自身或父元素的伪类。
- > 子代 亲儿子
- & 上一层选择器
- 直接嵌套表示后代
4.4：less运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
- 乘号（*）和除号（/）的写法
- 运算符中间左右有个空格
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位