rem布局

最近尝试着制作webapp，当时首先想到是需要一个响应式页面，所以赶紧去网上查查资料，度娘还是挺给力的。

何为rem，是一种网页单位，是基于根节点的，运用它这个特性在结合js计算可以做到响应式布局的效果，

首先我们要先了解下各个手机的分辨率以及像素比：

我们先给根元素设置一个font-size，我推荐这么设置，便于计算

html{font-size:50px}

然后引入用来计算的js代码：

/* javascript */

!(function(win, doc){
    function setFontSize() {
        // 获取window 宽度
        // zepto实现 $(window).width()就是这么干的
        var winWidth =  window.innerWidth;
        // doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
        
        // 640宽度以上进行限制 需要css进行配合
        var size = (winWidth / 640) * 100;
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
    }
 
    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
    
    var timer = null;
 
    win.addEventListener(evt, function () {
        clearTimeout(timer);
 
        timer = setTimeout(setFontSize, 300);
    }, false);
    
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
 
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
 
    // 初始化
    setFontSize();
 
}(window, document));

这是设计稿为宽度为640px的情况，

如有其它尺寸可以更改如下代码（这是设计稿为1080的情况，1080设备像素比刚好为2，所以根元素50px *2 = 150）：

// 640宽度以上进行限制 需要css进行配合
        var size = (winWidth / 1080) * 150;
        doc.documentElement.style.fontSize = (size < 150 ? size : 150) + 'px' ;

以上配置之后就可以愉快的开始写手机端页面了，宽度用%单位，高度用rem，很happy！

在设计稿中，量出的长度 除以 100 就可以转化为rem单位了（设计稿宽度为640的情况，1080即除以150转化为人单位）：

如：100px → 100px / 100 = 1 rem（640宽度）；

接下来和pc端写页面差不多了。

手机端页面不仅可以用rem布局，还可以用flex 弹性盒布局，因为手机端基本可以兼容，在之后可能会成为主流。运用flex布局这项技能还是需要滴。

 

转载于:https://my.oschina.net/u/3256201/blog/879746