移动端开发-rem

对于手机开发，适配是一个非常麻烦的事情，大家一般都是是呀百分百或者缩放来做，但是这种方法还是会导致实际效果跟设计稿差别很大。
借鉴腾讯的做法，使用先计算当前尺寸对应设计稿的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、高度不一样，调整间隙可以使用媒体查询配合