关于移动端的适配问题，总结两个方法，使用的预编译工具是考拉。

方法一

　　第一步：在布局的首页中引入js文件，主要的js代码如下，

1 var pixelRatio = 1 / window.devicePixelRatio; 2 document.write('<meta name="viewport" content="width=device-width,initial-scale='+ pixelRatio +',minimum-scale='+ pixelRatio +',maximum-scale='+ pixelRatio +',user-scalable=no" />'); 3 //获取html节点 4 var html = document.getElementsByTagName('html')[0]; 5 //获取屏幕宽度 6 var pageWidth = html.getBoundingClientRect().width; 7 //html的字号 8 html.style.fontSize = pageWidth/16 + 'px';

　　第二步：在css文件夹下新建一个less后缀名的文件，打开考拉，引入这个less文件，然后就可以在less文件下进行编译。设置@rem:45rem；后面的数值是根据设计图/16得出。

方法二

 

1 (function(doc,win){ 2 var docEle=document.documentElement, 3 resizeEvt='orientationchange' in window?'orientationchange':'resize', 4 recalc=function(){ 5 var clientWidth=docEle.clientWidth; 6 if(!clientWidth)return; 7 docEle.style.fontSize=100*(clientWidth/'设计图宽度')+'px'; 8 }; 9 if(!doc.addEventListener)return; 10 win.addEventListener(resizeEvt,recalc,false); 11 doc.addEventListener('DOMContentLoaded',recalc,false); 12 })(document,window)

 

转载于:https://www.cnblogs.com/AngliaXu/p/7262210.html