手机端rem适配方案
方案一:
1.viewport设置:
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
2.html根元素font-size设置(注:设计稿640px):
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + ‘px‘;
方案二:
1.viewport初始设置:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2.动态设置viewport的scale
var scale = 1 / devicePixelRatio;
document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘,‘initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);
3.动态计算html的font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px‘;
我对你博客的爱,你永远不会明白!
2016-09-24 下午 5:26