rem适配布局

---

前言

这部分开学习rem适配布局，能够解决移动端网页高度和文字大小随着网页窗口的变化而变化。接下来开始学习吧

---

一、rem单位

（1）em单位:相对单位，参考的是父级元素字号大小的倍数，2em就是字体的二倍
（2）rem（root em）相对单位，参考基准是根元素html的字体大小，如果是2rem表示的是html元素字号的二倍。

rem优点：
参考元素是html，一个页面中只有一个rem，可以进行整体页面控制，所有元素可以进行等比例的缩放。

二、媒体查询

1.媒体查询书写语法

（1）用@media语法开头
（2）mediatype媒体类型

（3）关键字and not only

（4）media feature媒体特性必须有小括号
注意：可以书写多个媒体查询，媒体特性必须有小括号包裹。
代码如下（示例）：

@media screen and (min-width: 800px){
   
       body {
   
           background-color: purple;
       }
}

2.媒体查询案例-背景变色

代码如下（示例）：

@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;
    }
}

3.媒体查询+rem，实现动态元素大小变化

代码如