标签：
对于手机开发，适配是一个非常麻烦的事情，大家一般都是是呀百分百或者缩放来做，但是这种方法还是会导致实际效果跟设计稿差别很大。
借鉴腾讯的做法，使用先计算当前尺寸对应设计稿的1像素比例，在rem来写尺寸大小。这个方法个人到现在发现是最好的一种
只需要按照图片或者容器在设计稿的尺寸来写，就能很完美的呈现
1、在body标签之后引入下面代码
1 //全局字体rem 2 (function (size){ 3 //获取初始的fontsize,16为比例标准 4 var originalSize = parseInt((window.getComputedStyle(document.documentElement,null)).fontSize); 5 function fn(){ 6 var win_w = parseInt(document.body.clientWidth); 7 win_w = (win_w>size)?size:win_w; 8 var win_h = parseInt(document.body.clientHeight), 9 html = document.getElementsByTagName(‘html‘)[0], 10 zoom=(win_w / size) / (originalSize/16) * 100; 11 html.style.fontSize = zoom + ‘px‘; 12 }; 13 fn(); 14 //横竖屏检测 15 function detectOtt(){ 16 var ww = parseInt(window.innerWidth); 17 var hh = parseInt(window.innerHeight); 18 if(ww>hh){ 19 //do something 20 //$("#horizon").show(); 21 }else{ 22 //$("#horizon").hide(); 23 fn(); 24 } 25 } 26 window.onresize = function(){ 27 detectOtt(); 28 }; 29 30 })(750);
2、在css填写容器宽高时，（假设设计尺寸宽是640）直接填写图片或者设计的 尺寸值/100 + rem。（eg:图片尺寸200x100px,可以直接写width:2rem;height:1rem;）
这种方式 在不同手机下显示尺寸都是跟设计稿完美对应的，唯一需要修改的就是高度不一样，元素之间的间隔需要做修改
3、高度不一样，调整间隙可以使用媒体查询配合
标签：
原文地址：http://www.cnblogs.com/huangfahui/p/5409103.html
