最近做移动布局比较多，要自适应各种手机。
比较理想的效果就是主背景图设在body上。然后body里面的元素用百分比布局，这样，整个页面的缩放就像一张图的缩放。像这样：
html{ height: 100%; } body{ min-height:100%; background: url("./images/XXX.jpg") no-repeat; overflow: hidden; background-size: 100% 100%; }
由于不同手机屏幕高宽比和设计图的比例不一样，自适应时相比设计图会有一些变形，但是现在的手机端屏幕差别不是很大，设计师给的设计稿比例一般为640:1136（iPhone5的尺寸，比较主流），这样的方法在各手机端看起来还是比较过得去的。
但是，百分比要计算，top、left、margin、都要百分比。子元素多一些就会比较麻烦。一直想怎么能更快捷一些，前几天看到一篇关于移动自适应的博客，可以学习一下。地址：http://www.cnblogs.com/PeunZhang/p/4517864.html
一个插件，关于自适应问题的解决。原理是利用css3里scale缩放，主要提供了三种：auto ，cover ，contain，三种适应形式。这三种都是根据屏幕大小不同调节宽高缩放，尽量让页面减少变形 。
看了一下实现的Js,比较简单。顿时觉得自己还是思考少了，为什么之前总在抱怨自适应布局的繁琐，却没能自己也写出这样一套东西呢，其实并不难的。于是迫不及待拿出自己以前的项目用它去实现了一把。因为做的都是微信端的页面，几乎都是全屏（cover）展示，但是橡树的插件cover的缩放方式会让背景图不能总是完全呈现出来，这样对于有顶部logo的就不行。于是，小小的修改了一下他的。改写成一个以后更适合我的（对于我平时项目比较适合的。）就是始终让页面的高宽缩放到手机屏的大小，跟手机屏“贴合在一起”。
js如下：
function pageResponse(opt) { //getElementsByClassName function getElementsByClassName(cl) { if(document.getElementsByClassName){ return document.getElementsByClassName(cl) } else{ var ele = [], els = document.getElementsByTagName("*"), i = els.length; cl = cl.replace(/-/g, "\-"); var pa = new RegExp("(^|\s)" + cl + "(\s|$)"); while(--i >= 0){ if (pa.test(els[i].className)){ ele.push(els[i]); } } return ele; } } //缩放函数 function template(obj, sw, sh){ var s = obj.style; s.width = pw + "px"; s.height = ph + "px"; s.webkitTransformOrigin = "left top 0"; s.transformOrigin = "left top 0"; s.webkitTransform = "scale(" + sw +','+sh+ ")"; s.transform = "scale(" + sw +','+sh + ")"; } //确定缩放比例 var dw = document.documentElement.clientWidth, dh = document.documentElement.clientHeight, pw = opt.width || 320, ph = opt.height || 568, pd = getElementsByClassName(opt.class), sww=dw/pw, shh=dh/ph; console.log(sww); // 遍历后取得对象进行缩放 for(i = 0;i < pd.length;i++){ template(pd[i], sww, shh); } }
用的时候这样：
<body> <div class="page"> <img src="imgs/XXX.jpg" alt="" width="640" height="1136"> <p class="text">看你跟不跟着我自适应！！！</p> <div class="button"><img src="imgs/button.png" alt=""></div> </div> <script type="text/javascript" src="js/pageCover.js"></script> <script type="text/javascript"> window.onload = window.onresize = function(){ var page = new pageResponse({ class : 'page', //模块的类名 width : '640', //输入页面的宽度，默认宽度为320px height : '1136' //输入页面的高度，默认高度为504px }); } </script> </body>
但是这样的问题就是，
<!-- 注意的问题：原理是只是对最外层page的缩放（包括其子元素）
1、body（最外层page）的宽高基准是相对于page设置的大小，不是设备的大小
2、字的大小（font-size）在body中设置，可以继承到子元素。防止字体因缩放过大或过小。
3、page的高宽等于UI给的视觉图。否则与内部切片的缩放比例不协调。
缺点：过分缩放变形，适应大多移动端还是可以的。
优点，整个布局在单界面中全部显示。
-->
这样以后就不用去辛苦的计算百分比了。可以根据设计图直接用px去布局，然后做一套页面，各个设备试用。如果这样还不能满足的话，可以与mediaQuery结合使用。