手机端响应式布局
最近做的一个年会活动，手机端使用了一种新的响应式布局方式，之前一直使用的是百分比以及REM，本次使用的是zoom属性，根据不同的屏幕，进行等比压缩。项目完成后，深切的感受到了zoom的魅力，相比于百分比以及REM，使用zoom属性的优势主要有以下几点：1.不同手机端兼容性问题很少，无论屏幕宽高多少，都能按照宽度比例，进行等比压缩，所以不存在不同手机端的差异；2.代码写起来简单多了，基本上只需要按照一种宽高去写代码即可；3.可以重复利用，写好的JS以及页面结构可以直接套用到其他项目。唯一的一个缺点：需要注意页面的一些元素位置排序。
以下是HTML的结构。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<wxj:cssresource src="/css/mobile/nianhui/index.css?v=1" />
<!-- S zoom -->
<style type="text/css" id="_zoom"></style>
<!-- E zoom -->
</head>
<body >
<div id="container">
<div class="zoom">
<div id="J_loading" class="mp_loading"><div class="mp_loading_clip"><div class="mp_loading_bar"></div></div><div id="J_precent" class="mp_loading_txt">0%</div></div>
<div class="wrapper">
</div>
</div>
</div>
</body>
</html>
以下是JS部分：
// 页面设计图的宽度
var pageConfigWidth = 750;
var pageMaxWidth = 800;
var _w,_zoom,_hd,_orientationChange,_doc=document,__style=_doc.getElementById("_zoom");__style||(_hd=_doc.getElementsByTagName("head")[0],__style=_doc.createElement("style"),_hd.appendCHild(_style)),_orientationChange=function(){_w=_doc.documentElement.clientWidth||_doc.body.clientWidth,_w=_w>pageMaxWidth?pageMaxWidth:_w,_zoom=_w/pageConfigWidth,__style.innerHTML=".zoom {zoom:"+_zoom+";-webkit-text-size-adjust:auto!important;}"},_orientationChange(),window.addEventListener("resize",_orientationChange,!1);
loadedPercent(20);
function loadedPercent(num){
if(parseInt(document.getElementById("J_precent").innerHTML) < num){
document.getElementById("J_precent").innerHTML = num+"%";
}
if(num == 100){
document.getElementById("J_loading").style.display = "none";
}
}
function finishLoading() {
$("#t_loading").hide();
document.body.scrollTop = 0;
setTimeout(function() {
$("#container [isusing=yes]").css("opacity", "0").show().animate({
opacity: 1
}, 30, 'ease-in-out');
}, 0);
loadedPercent(100);
}
$(function(){
finishLoading();
});
