研究移动端页面已经有许久了，一直执着于rem来开发，不谈性能怎么样，单从工作效率上看影响了不少，首先要固定设计稿的宽度，一般都是固定在640px，然后在根据根目录的字体大小来计算出每个元素的rem的值，无疑在开发中切图，每个元素都要去计算一边，是不是感觉很麻烦，有没有一种方法，像切PC端页面一样，切了直接写css，不用去计算这么麻烦，答案是肯定有的！好吧，先给大家看一下，我以前用rem来开发的技术文章吧！

rem相关资料文档：
手机端页面rem自适应脚本
CSS中常用的字体单位：px、em、rem和%的区别
使用rem布局手机页面（自适应各种分辨率手机）
用rem做响应式开发
详解移动端rem变革
使用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 name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

下面一段js代码放入网页头部,例如：设计稿尺寸是640只需要把320全部改成640就ok了：

var phoneWidth = parseInt(window.screen.width);
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth / 320;
var 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=320, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
  } else {
    document.write('<meta name="viewport" content="width=320, target-densitydpi=device-dpi">');
  }
} else {
  document.write('<meta name="viewport" content="width=320, 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;
  });
};

http://www.grycheng.com/?p=2107

转载请注明：有爱前端 » 轻松使用px为单位开发移动端页面