移动端单位换算理解

在公司上班两年多，对移动端的布局用过两种方法

　　第一种。页面顶部引入一个rem.js,代码如下：

new function (){
       var _self = this;
       _self.width = 750;
       _self.fontSize = 100;
       _self.widthProportion = function(){
               var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;

               return p>1?1:p;
           };

       _self.changePage = function(){
           document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
       }

       _self.changePage();
       window.addEventListener("resize",function(){_self.changePage();},false);
}; 

　　UI给的设计稿是按照750*1334的设计稿。对于随屏幕变化的根据rem来设置大小。当页面为750px，其font-size为100px。这个就是一刀切，没有考虑dpr。头部<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">也是这样固定设置。

　　以上方法换算出来的大小就是页面呈现的最终大小。因为是没有缩放，100%展示。

 　　第二种方法： 去年开始采用淘宝团队的flexsible方案。此方案跟上个版本比较的话有如下差异：

　　1、会获取设备的dpr，将layout viewport（网页的css高度和宽度）会是设备大小的dpr倍。然后再使用<meta name="viewport" content="initial-scale=1/dpr, maximum-scale=1/dpr, minimum-scale=1/dpr, user-scalable=no">将网页缩至设备的100%。layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。

　　2、以上原因解决了ios机1像素过大的问题。

更好的理解flexible请移步 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html