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

相关推荐