rem适配布局---4. rem适配方案

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- 320px) {
    html {
        /* 在320像素的屏幕下 */
        font-size: 21.33px;
    }
}

@media screen and (min- 750px) {
    html {
        /* 在750像素的屏幕下 */
        font-size: 50px;
    }
}

div {
     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的大小