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%);
}