移动web开发要面对很多尺寸的设备，做自适应，来满足不同屏幕同一效果。下面推荐一种方法，只需一段js就可完美解决。直接看代码。

!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=750,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>750&&(n=750);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

看代码，其中重要的就是两个参数i、d，第一个参数，是设计稿的宽度(ui给前端设计稿一般750px)，第二个参数是px与rem的转换比例，通常会写100（因为好算）；

举个例子：实际应用起来就是，#box1{ height:100px;}而调用了rem就是#box1{ height:1rem;}以此类推。 100px = 1rem； 1px = 0.01rem。

这种方法凡是跟尺寸有关的padding、margin、width、height等等，都可以用rem来写单位，这样当不同分辨率的手机在看同一个页面时，效果几乎是一样的。

当然了，要把这段js代码最好封装在一个单独的js文件里，并且放在所有的css文件引入之前加载。