rem布局
flex布局是一种弹性布局，当浏览器大小缩放的时候，里面的内容并不会跟着缩放，rem就是一种随着浏览器大小缩放，而跟着缩放的布局。
这样可以保持整个布局的完整性，一般适用于移动端的布局。
rem单位#
root em 它是一个相对单位 em我们知道是父元素字体大小
rem基准就是html字体大小
如果html的font-size是12px,其它元素是width:2rem，那么px就是24px
媒体查询#
@media可以根据不同的屏幕尺寸设置不同的样式
语法#
@media mediatype and|not|only (media feature){
css-code;
}mediatype查询类型#
不同的设备划分成不同的类型，称为媒体类型
| 值 | 说明 |
|---|---|
| all | 所有设备 |
| 打印机和打印预览 | |
| scree | 电脑屏幕，平板，手机 |
关键字#
关键子将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
- and :可以将多个媒体特性链接到一起，且的意思
- not :排除某个媒体类型，相当于"非"的意思，可以省略
- only:指定某个特定的媒体类型，可以省略
媒体特性#
常用的有3个
| 值 | 说明 |
|---|---|
| width | 输出设备页面可见区域的宽度 |
| min-width | 输出设备页面最小可见区域的宽度 |
| max-width | 输出设备页面最大可见区域的宽度 |