1. rem适配方案
- 目标：让一些不能等比例适配的元素达到当设备尺寸发生改变的时候，等比例适配当前的设备。
- 方法：使用媒体查询更具不同的设备安装比例设置html字体大小，然后页面元素使用rem做尺寸单位，当html字体变化的时候，元素尺寸也会发生变化，从而达到等比缩放的适配。
1.1 实际开发适配方案
- 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小（手段：媒体查询）
- css中，设计稿元素的宽、高、相对位置等取值，按同等比例换算为rem为单位的值。
1.2 适配方案技术使用（主流）
- 技术方案1：less、媒体查询、rem
- 技术方案2(推荐)：flexible.js、rem
上述两种方案都存在，方案2更简单，现阶段无需了解里面的js代码。
2. 适配方案1：rem+媒体查询+less技术
2.1 设计稿常见尺寸宽度
一般情况下，我们以一套或者两套效果图适应大部分屏幕，放弃极端屏或者对其优雅降级，牺牲一些效果，现状基本以750px为准。
2.2 动态设置html标签font-size大小
- 假设设计稿是750px
- 假设我们把屏幕划分为15等分（划分标准不一，可以是10等分也可以是20等分）
- 每一份作为html字体大小，这里是50px
- 那么在320px设备的时候，字体大小为320/15，也就是21.33px,到这里就已经实现了不同屏幕的文字大小不一样。
- 我们用页面元素的大小除以不同的html字体大小，就会发现它们的比例还是相同的
验证：
@media screen and (min-width: 320px) {
html {
/* 在320像素的屏幕下 */
font-size: 21.33px;
}
}
@media screen and (min-width: 750px) {
html {
/* 在750像素的屏幕下 */
font-size: 50px;
}
}
div {
width: 2rem;
height: 2rem;
background-color: pink;
}
/* 1.首先选一套标准尺寸750为准 */
/* 2. 用屏幕尺寸 除以 我们划分的份数 得到html里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
/* 3. 页面元素的rem值=页面元2.3元素大小取值方法
公式：
页面元素的rem值=页面元素px值（屏幕px宽度/划分份数）
屏幕宽度/划分份数=html的font-size的大小
或者：页面元素的rem值=页面元素值px/html的font-size的大小