element 手机适配_移动端rem.js适配屏幕

九月已成历史，十月如期而至...可能是九月工作比较清闲，周记就没怎么写，十月决不能这么堕落，立贴为证，至少保证5篇博客！！！如果没学到什么新知识，就对以往的那些工作中常用到的知识点做个总结...话不多说，今天就来谈谈移动端的rem适配...本文将从rem是什么、为什么要用rem适配、怎么用rem来讲解，保证浅显易懂...

1、什么是rem

rem(font size of the root element)是指相对于根元素()的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em(font size of the element)是指相对于自身的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

2、为什么用rem适配

由于移动端的屏幕众多，就拿iphone来说，iphone5、iphone6、iphone6+分别是360px、375px、414px...Android机的分辨率更是百花齐放...面对这么多的屏幕，px显然不能轻易去适配了，比如设置div的

padding-left为10px时，iphone5中比例和设计稿一致，但iphone6+则显得有点“瘦”了，因此我们要想着去适配不同屏幕的手机，让设计稿在分辨率相差很大的手机上显示的效果也要一样。

早期的适配用百分比+媒介查询写很多类型的css代码，这时候的代码量很大，适配效果也不是很好，毕竟机型太多...这时候rem的优势就充分展示出来了...不同分辨率的屏幕，通过动态设置rem的值(即根元素的字体大小)，就能实现等比例缩放的效果。

3、怎么用rem