app web中css使用rem单位 + js 全适配所有大小手机

rem和em单位区别不在过多赘述；

在css文件中设置全局html的font-size：100px;(方便计算；10xp在chrom下自动变成12px，就算是有-webkit-adjust-none也不起效果；)

将所有的元素高，宽，margin，padding全部换算成rem；

如：原先200px高的元素现在是height：2 rem；

 

做到这一步其实和用px做单位没什么两样；

因为基准值设置在html中，rem提供的是全局性的变换；

 

js代码：

 

//获取当前视窗大小；初始化html中的font-size；  
  var clientWidth = document.body.scrollWidth;

if (!clientWidth) return;

//            alert(clientWidth);
//            alert($('html').css('font-size'));
var x = 100* (clientWidth/720) + 'px';
$('html').css('font-size',x);

这里720是设计稿中总的宽度值；

总结一下：

在720px下的设计稿中，基准值为100px；那么在当前宽度的页面中，基准值为x；求x？

 

很简单的数学题，对吧？

 

ps：这里没有做随着宽度改变而动态设置font-size的动作，而是页面打开时初始化font-size；如果需要可以用js实现；

参考资料：http://www.520ued.com/article/53e98eafbb16a74c41b5de77