移动WEB开发之rem布局--rem适配方案

思考

1. 我们适配的目标是什么？ 2. 怎么去达到这个目标的？ 3. 在实际的开发当中使用？

答案

1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后 页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸 也会发生变化，从而达到等比缩放的适配。

rem 实际开发适配方案

① 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询） ② CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

rem 适配方案技术使用（市场主流） 

技术方案1

 less  媒体查询  rem

技术方案2（推荐）

 flexible.js  rem

总结： 1. 两种方案现在都存在。 2. 方案2 更简单，现阶段大家无需了解里面的js代码。

rem 实际开发适配方案1

rem + 媒体查询 + less 技术

1. 设计稿常见尺寸宽度

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果 现在基本以750为准。 

2. 动态设置 html 标签 font-size 大小

① 假设设计稿是750px

② 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③ 每一份作为html字体大小，这里就是50px

④ 那么在320px设备的时候，字体大小为320/15 就是 21.33px

⑤ 用我们页面元素的大小 除以不同的 html 字体大小会发现他们比例还是相同的

⑥ 比如我们以 750为标准设计稿

⑦ 一个100*100像素的页面元素 在 750屏幕下， 就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1

⑧ 320屏幕下， html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1

⑨ 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果

3. 元素大小取值方法

① 最后的公式： 页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

② 屏幕宽度/划分的份数 就是 html font-size 的大小

③ 或者： 页面元素的rem值 = 页面元素值（px） / html font-size 字体

 

 

1. 首先我们选一套标准尺寸 750为准

2. 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的

3. 页面元素的rem值 =  页面元素在 750像素的下px值 / html 里面的文字大小

 例如页面元素div宽100px 

750下15等分

750/15=50

然后

rem=100px/50=2rem