web开发之前端rem适配方案

1.rem+媒体查询+less技术

设计稿常见尺寸宽度：一般情况下，我们以一套或者两套适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750为准。

动态设置html标签font-size大小（如果不明白为什么要动态设置html的大小，请查看rem跟em的区别这篇文章）

1. 假如设计稿是750px
2. 假设我们把整个屏幕划分为15等份（划分标准也可以是10等份或者20等份）
3. 每一份html的字体大小就是50px（750/15= 50）
4. 那么在320px的设备的时候，html的字体大小为320/15 = 21.33px
5. 比如我们以750px标准设计稿
6. 一个100*100像素的图片在750屏幕下，就是100/50转换成2rem，那么就是2rem*2rem比例是1:1
7. 320屏幕下，html的文字大小是21.33px，则2rem= 42.66px此时宽跟高都是42.66px，但是宽高比是1:1
8. 但是已经能实现不同屏幕下，页面元素盒子等比例缩放的效果。

 

元素大小取值方法：

• 最后的公式：页面元素的rem值= 页面元素值（px）/（屏幕宽度/划分的份数），例如：div设置的2rem的宽度跟高度= 750px设计稿上面的100px的元素大小/屏幕划分成15等分以后，每一份的大小为50px 

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

• 或者：页面元素的rem值= 页面元素值（px）/html中的font-size的大小

2.rem+flexible.js

• 手机淘宝团队出的简洁高效移动端适配库
• 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
• 它的原理是把当前屏幕划分为10等份，但是不同设备下，比列还是一致的。
• 我们要做的就确定好我们当前设备的html文字大小就可以了
• 比如我们当前设计稿是750px，那么我们只需要把html文字大小设置为75px（750px/10）就可以
• 里面页面元素rem值：页面元素的px值/75
• 剩余的，让flexible.js来去算。