移动端几种做前端适配的方法讲解

目前我所知道是有几种方法来做适配:

 

1.使用rem单位来做网页适配，这个是我比较推荐的一种，效果很好，浏览器的兼容性也不错

只要一行代码就能适配多个分辨率终端

 

        (function(doc,win){
            var docEl =doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function(){
                        var clientWidth = docEl.clientWidth>750 ? 750 :docEl.clientWidth;
                        if (!clientWidth) {return};
                        docEl.style.fontSize = 100 * (clientWidth/750) + 'px';
                    };
            recalc();
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document,window)

 

上面是做适配的代码。改变html的font-size,更详细的rem用法在这里不作过多讲解，请网上搜一下（建议基础值设置大一点可以避免因为精度丢失引起的布局错乱，上面我设置的是100px）

2.第二种就是使用浏览器的缩放功能来做，

先按设计稿还原html，然后再设置viewport属性，

(function(){
    var W=750,w=parseInt(window.screen.width),s=w/W,u=navigator.userAgent.toLowerCase(),m='<meta name="viewport" content="width='+W+',';
    if(/android (\d+\.\d+)/.test(u)){
          if(parseFloat(RegExp.$1)>2.3)m+='minimum-scale='+s+',maximum-scale='+s+',';
    }else{
         m+='user-scalable=no,';
    }
   m+='target-densitydpi=device-dpi">';
document.write(m);
}());

 弊端：这种方法在PC端打开部分界面可能会变形，布局错乱，不太推荐这种方法

 

3.适应响应式布局来做，用媒体查询，具体的可以参考bootstrap，

  弊端:冗余代码较多，要做多个分辨率的适配，css代码写的较多。个人不太建议使用这种，除非用成熟的bootstrap框架节省一些工作量。

 

4.使用自适应百分比来布局，

   这种方法比较古老，做出来的界面在各个分辨率的适配上比较不好，例如一个div在分辨率为320*568是320px * 100px  在375 * 667 的分辨率显示就是 375px * 100px 效果不是等比拉升

 

 

 

 

 

个人建议使用第一种来做，完美适配任意终端，兼容性杠杠的