輕鬆使用px爲單位開發移動端頁面

研究移動端頁面已經有許久了，一直執着於rem來開發，不談性能怎麼樣，單從工做效率上看影響了很多，首先要固定設計稿的寬度，通常都是固定在640px，而後在根據根目錄的字體大小來計算出每一個元素的rem的值，無疑在開發中切圖，每一個元素都要去計算一邊，是否是感受很麻煩，有沒有一種方法，像切PC端頁面同樣，切了直接寫css，不用去計算這麼麻煩，答案是確定有的！好吧，先給你們看一下，我之前用rem來開發的技術文章吧！

好了，廢話很少說，進入今天的正題，輕鬆使用px開發移動端頁面！就在前天瀏覽微信的「每天酷跑」的活動主題的時，發現他所有是採用的px的單位，因而便仔細看了他的核心js代碼，猛然一看，恍然大悟！每天酷跑活動頁面地址：http://iwan.qq.com/act/kp3dxz/index.htm?&ptag=4_4.5.5.10729_wxf#

上面的具體代碼你們能夠前往自行研究，下面我把關鍵性的代碼拷貝出來，一看就懂，之後你們只須要直接引入這些js代碼就ok了，就無論他設計稿是640、720、750了，直接拿過來直接切，而後修改參數就大功告成了，就徹底能夠當pc端頁面來切了，而且還適應pc端和移動端，萬事大吉啊！關鍵是還適配各個手機，各個分辨率，不用它感受很浪費，用了它又感受虛僞地牛逼着，其實也就幾行代碼的事情，一看就懂只是你沒有去深刻的往這方面研究罷了！

meta默認設置（其餘的meta就根據項目需求定）：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

CSS代碼：

.wrap{width:320px;margin:0 auto;}//width：320px，能夠根據當前設計稿來定，能夠是640、750等尺寸

下面一段js代碼放入網頁頭部,例如：設計稿尺寸是640只須要把320所有改爲640就ok了：

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

爲兼容性考慮，在頁面下面加入下面js，其中wrap爲包裹結構最外層的ID，wrap給它320的寬度居中就ok了：

if (navigator.appVersion.indexOf('Android') != -1) {
  document.addEventListener("DOMContentLoaded",
  function(e) {
    document.getElementById('wrap').style.zoom = e.target.activeElement.clientWidth / 320;
  });
};