摘要：
在公司上班两年多，对移动端的布局用过两种方法第一种。important");}_self.changePage();window.addEventListener;};UI给的设计稿是按照750*1334的设计稿。对于随屏幕变化的根据rem来设置大小。当页面为750px，其font-size为100px。这个就是一刀切，没有考虑dpr。头部也是这样固定设置。以上方法换算出来的大小就是页面呈现的最终大小。然后再使用将网页缩至设备的100%。layoutviewport的宽度可以通过document.documentElement.clientWidth来获取。
在公司上班两年多，对移动端的布局用过两种方法
第一种。页面顶部引入一个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