轻松使用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;
  });
};