长度单位 rem
移动适配 要求网页元素的宽高都要随着设备的宽高等比缩放
- rem 是目前多数企业在用的解决方案
- vw / vh 是未来的解决方案
（1）rem 基本使用
屏幕宽度不同，网页元素的尺寸也不同（等比缩放）
虽然使用 PX 单位或 百分比 布局也可以实现，但是 PX 单位是绝对单位，百分比布局需要高度固定，宽度自适应
目前的适配方案是：rem 、vw / vh
rem 单位是 相对 单位，是相对于 HTML 标签的字号计算的结果，1rem = 1HTML字号大小
例如：先给 HTML 设置字号，再写 rem ：
（2）媒体查询
可以使用 媒体查询 设置 差异化 CSS 样式
我们的手机大小不同，分辨率也不同，如果要设置不同的 HTML 标签字号，就要使用 媒体查询 ，它能够 检测视口的宽度 ，然后编写差异化的 CSS 样式。
写法如下：当某个条件成立，就会执行对应的 CSS 样式
例如：使用媒体查询，根据不同的视口宽度，设置不同的跟字号
<style>
@media (width: 375px) {
html {
font-size: 20px;
}
}
@media (width: 912px) {
html {
font-size: 50px;
}
}
div {
width: 10rem;
height: 10rem;
background-color: lightgreen;
}
</style>
<body>
<div></div>
</body>
分析 ： 当页面宽度为 375px 时，html 的字号是 20px ，由于 1rem = 20px ，所以 div 盒子的尺寸就是 10 * 20 = 200 px
同理，当页面宽度为912px 时，html 的字号是 50px ，由于 1rem = 50px ，所以 div 盒子的尺寸就是 10 * 50 = 500 px
（3）rem 移动适配
由上例，我们可以看出，设备宽度越大，元素的尺寸就越大；反之，设备宽度小，元素的尺寸就小，那么当设备宽度不同时，我们又该如何设置 HTML 的字号呢？
针对这个问题，在目前的 rem 布局 方案中，我们会将 网页等分成 10 份 ，HTML 标签的字号为 视口宽度的 1/10
<style>
* {
margin: 0;
padding: 0;
}
@media (width: 375px) {
html {
font-size: 37.5px;
}
}
@media (width: 912px) {
html {
font-size: 91.2px;
}
}
div {
width: 2rem;
height: 3rem;
background-color: lightgreen;
}
</style>
<body>
<div></div>
</body>
另外，可以使用 flexible.js 配合 rem 实现在不同宽度的设备中，网页元素尺寸等比缩放的效果
flexible.js 是一个用来适配移动端的 JS 框架，核心原理就是根据不同的视口宽度，给网页中 html 根节点设置不同的字号，并且不会受电脑分辨率的影响。
