一、rem 是什么
rem（root em）是一个相对单位，类似于 em。
em 是父元素的字体大小，而 rem 的基准是相对于 html 元素的字体大小。
html {
font-size: 20px;
}father {
font-size: 16px;
}/* child 是 father 的子元素， 则 1em = 16px，此时 width 为 160px */
child {
width: 10em;
}/* rem 是相对于 html 元素的字体大小，则 1rem = 20px，此时 width 为 200px */
footer {
width: 10rem;
}
二、什么是媒体查询 媒体查询（Media Query）是 CSS3 中的新语法，可以针对不同的媒体类型来定义不同的样式，比如
可以根据不同屏幕尺寸设置不同样式。在重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染。
/* 语法 */
@media mediatype and|not|noly (media feature) {
具体 css 样式
}1、mediatype 媒体类型
| 值 | 说明 |
|---|---|
| all | 用于所有设备 |
| 适用于在打印预览模式下在屏幕上查看的分页材料和文档。 | |
| screen | 主要用于屏幕，我们最常用的 |
| speech | 主要用于语音合成器 |
- and：可以将多个媒体特性连接到一起，相当于“且”；
- not：排除某个媒体类型，相当于“非”，可以省略；
- only：指定某个特定的媒体查询，可以省略。
（1）当屏幕可视区域宽度小于 500px 时，body 背景色设置为红色。
/* 在屏幕上 且 宽度最大为 500px 时，设置 body 背景为红色 */
@media screen and (max-width: 500px) {
body {
background-color: red;
}
}（2）当屏幕可视区域宽度大于 500px，小于1000px 时，body 背景色设置为绿色。
/* 在屏幕上 且 宽度最小为 501px，且 宽度最大为 999px 时，设置 body 背景为绿色 */
@media screen and (min-width: 501px) and (max-width: 999px) {
body {
background-color: green;
}
}（3）当屏幕可视区域宽度大于1000px 时，body 背景色设置为紫色。
/* 在屏幕上 且 宽度最小为 1000px时，设置 body 背景为紫色 */
@media screen and (min-width: 1000px) {
body {
background-color: purple;
}
}4、用媒体查询引入不同资源文件
三、媒体查询 + rem 实现元素动态大小变化 rem 单位时根据 html 中文字大小变化的，用媒体查询不同设备的宽度，设置不同设备 html 的 font-size，就可以实现页面元素大小的动态变化。
那 html 中的 font-size 设置为多大合适呢？
假设我们的设计稿是 750px 的，我们把屏幕划分为 15 等份（也可以是 10 或者 20），每一份的大小（即 50px）作为 html 的字体大小。
【rem 和 媒体查询】那么在 320px 的设备中，每一份的大小为 320 / 15 = 21.33px。
640px 的设备中，每一份的大小为 640 / 15 = 42.67px。
/* 屏幕宽度 320px ～ 640px */
@media screen and (min-width: 320px) {
html {
font-size: 21.33px;
}
}/* 屏幕宽度 640px ～ 750px */
@media screen and (min-width: 640px) {
html {
font-size: 42.67px;
}
}/* 屏幕宽度 750px 以上 */
@media screen and (min-width: 750px) {
html {
font-size: 50px;
}
}如果此时设计稿中有个 div 的高度为 80px，则在 css 中，高度应该为 80 / 50 = 1.6rem。
也就是用设计稿中 元素的像素值/（设计稿尺寸/划分的份数）。
这样这个 div 在不同屏幕尺寸下的大小分别为：
- 屏幕宽度 320px ～ 640px ： 21.33 * 1.6 = 34.128px
- 屏幕宽度 640px ～ 750px ： 42.67 * 1.6 = 68.272px
- 屏幕宽度 750px 以上 ： 50 * 1.6 = 80px
