webapp，liveapp：流式布局和rem布局

liveapp场景应用，一般针对的是移动端，近来也是很火，颇有一些感受，拿来分享一下。

页面宽度范围：

一般移动端页面我们的像素范围是320px-640px，最大640px，最小320px，所以设计稿就是按照640px来做

布局方式：

　　流式布局，百分比布局和rem。

　　目前我用过的主要是这rem和流式布局

流式布局：

　　网页的主要架构部分按照百分比布局，宽度百分比，高度定死；

　　如果是图片宽度设置百分比，高度根据图片的比例自适应，如果是封面图片可以高度定死，用background-size:cover显示部分就行；

　　一些具体的内容直接用像素定宽高就行了，比如用户头像，一些按钮，一些比较固定的文字。

　　下面这个页面就是流式布局，分别是640和320情况下的样子，下面的页面不是场景应用，只是举例

　　流式布局一般偏向于文字展示的页面，对整个页面比例要求不那么高的。

专门说说rem布局：

　　rem就是偏向于图片较多，不出现滚动条的满屏页面，且高度还原设计图比例的情况，所以下面的例子是基于满屏页面的情况。

　　关于rem的具体介绍参考腾讯的rem文章 http://isux.tencent.com/web-app-rem.html

　　因为rem是根据html的字体像素确定它的值，也就是html{font-size:20px}时 1rem==20px。

　　总之我们可以用js获取到屏幕的宽高后，通过修改html的font-size来控制整个页面的大小，来达到完整并高度还原设计稿。

　　我们的宽度范围仍然是320-640，我们怎么定义html的字体像素范围呢。

　　我们需要用字体像素对应320-640，比如font-size为10px的时候对应320px，那么确定10px为最小的基数，那么对应关系就会如下：

font-size	1rem	宽度	用rem表示宽度
10px	10px	320px	32rem
20px	20px	640px	32rem

但实际上我更喜欢这样：

font-size	1rem	宽度	用rem表示宽度
20px	20px	320px	16rem
40px	40px	640px	16rem

因为低于12px在某些浏览器里是默认还是为12px，因此当我们给html设置font-size：10px的时候，这时还是12px，就会对布局造成影响。

所以一般我以20px作为基数对应320px。

还有比如iphone4里，在微信下浏览器的高度比较矮，这时我们为适应高度的还会把font-size设置到18px左右，这样才可能显示完整。

好现在，我们设置body的宽度为16rem，根据当前屏幕的宽度修改html的跟字体大小

如果屏幕宽度大于等于640px，我们就设置为40px，小于等于320px就设置为20px。

　如果是在320,640之间，就用对应的rem去计算，比如20px为320px基数时候，rem最大的值是16rem，16就作为基数去除屏幕宽度，

比如当前屏幕宽度是400px，那么根字体大小就是 400/16=26px

以下是js resize：

window.onresize = function(){
    resize();
}

function resize(){
    //html:20px: 16rem 320px
    //html:40px: 16rem 640px
    var base = 16;//rem

    var wid = $(window).width();
    var hei = $(window).height();
    if(hei < 460){//适应个别高度较矮的设备
        $('html').css('font-size', '18px');
        return;
    }
    if(wid < 320){
        $('html').css('font-size', '20px');
        return;
    }
    if(wid > 640){
        $('html').css('font-size', '40px');
        return;
    }
    $('html').css('font-size', wid/16 + 'px');//在320和640之间，除以16的基数，来算font-size
}
resize();

基于rem，我们几乎都可以用绝对定位，相对于body就行了。

比如我们的设计稿，设计稿是640px的，对应的最大的font-size：40

有一个按钮宽度是200px，高度是100px，相对于图片左边距是40px，相对于图片上边距是80px。

那么我们的css就应该这样写：

.button{
　　　position: absolute;
     width: 200/40rem;(5rem) // 200px/40px = 5rem
     height: 100/40rem;(2.5rem)
     left: 40/40rem;(1rem)
     top: 80/40rem;(2rem)
}

如果我们的设计稿是320px，按钮宽高边距和上面一样，那么我们css就应该这样写：

.button{
　   position: absolute;
     width: 200/20rem;(10rem) //200px/20px = 10rem
     height: 100/20rem;(5rem)
     left: 40/20rem;(2rem)
     top: 80/20rem;(4rem)
}

　　这样布局起来会省很多事情。

百分比布局:

还有一种就是单纯的百分比布局，也是全部用绝对定位，和以上rem不同的就是，用的百分比作为宽高边距的单位，这种方式并不推荐，控制力不强。

以下是一些心得：

　　1.fastclick最好都要使用

　　2.基于微信开发的时候，微信缓存非常厉害哟，有一次改了几个小时代码一直不对，最后发现是微信缓存，有时候不得不去系统管理里关闭微信和微信缓存进程。

　　3.最好还是用构建工具，比如gulp、grunt

　　4.做一个通用的demo start，供下次使用，包括gulp等构建工具，常用的三方和自定义的less、css loading，js相关文件和三方库

　　5.写一个图片预加载，未加载完前显示css loading，加载完了再显示页面，

以下是预加载的代码，主要针对一些大图片做加载，因为一般主要的大点的图片加载完，页面都会加载完，这算是一种小技巧吧，实际的精度也不差：

    //图片预加载
    function preloader(images, cb){
        i = 0;
        var onComplete = function(e){
            i++;
            if(i == images.length){
                cb && cb();
            }
        }
        for(j in images) {
            var img = new Image();
            img.onload = img.onerror = onComplete;
            img.src = images[j];
        }
    }

    var onImgLoaded = function(){
        $(".loading").addClass("hide");
　　　　
　　　　　/*显示正式页面*/
    }

    //使用
    preloader(["/img/guide.png","/img/combine-list-bg.png","/img/frontpage-words.png","/img/frontpage-bg.png"], onImgLoaded);

6.弹框居中的方式，推荐用下面代码：

.tf-center{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

webapp，liveapp： 流式布局和rem布局

推荐阅读

webapp，liveapp：流式布局和rem布局