使用rem進行移動端佈局

前言

使用rem前你需要了解的幾個小東西
1.物理畫素(physical pixel)
我們看到的每個螢幕都是由一顆顆我們肉眼難以看到的小顆粒（物理畫素）組成的。
2.邏輯畫素
是計算機座標系統中的一個點，這個點代表一個可以由程式使用的虛擬畫素(比如說CSS畫素)。
3.裝置的畫素比(device pixel ratio)簡稱DPR（DPR = 物理畫素 / 邏輯畫素）
它的數值體現了物理畫素和邏輯畫素之間的關係，用公式可以計算出該裝置的DPR的大小：

所以，這個時候就知道了，為什麼在pc上設定font-size=12px,非常正常。而在移動端就變得非常小了，是因為DPR這二貨造成的~~
我們電腦的DPR是1，而移動端不是1，ios相對來說規範很多，iphone5,6都是2，6p是3。安卓的就玩得比較high了，各種DPR,當然你可以自己來檢視裝置DPR

DPR=window.devicePixelRatio

rem介紹

rem（font size of the root element）是指相對於根元素（即html元素）的字型大小的單位。
假設根元素的字型大小是100px, 則3rem的大小為 3*100=300px

html{
    font-size: 10px;
}
div{
    width: 3rem; /* 3*10 = 30px;*/
    margin: 2rem;
}

解決方法

1.css(媒體查詢)

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
 
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
 
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}
 
@media screen and (min-width: 440px) {
    html {font-size: 20px;}
}
 
@media screen and (min-width: 480px) {
    html {font-size: 22px;}
}
 
@media screen and (min-width: 640px) {
    html {font-size: 28px;}
}

2.根據不同的裝置寬度在根元素上,使用js動態設定font-size
為了能將設計稿中的 px 方便的轉換為頁面中 rem，我設定 1rem 為 寬度為 640px 的設計稿中的 100px。程式碼如下

(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;

                   //width:iphone5=320,iphone=375,ipad=768
        if (width > 640) { // 最大寬度,可以根據自己的需要來設定
            width = 640;
        }
        var rem = width / 6.4; //(設計稿640px/100px)即：在320（iphone5)/6.4=50
        docEl.style.fontSize = rem + 'px';  //根字型 為50px
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    refreshRem();

})(window);

還有一種方法會根據 devicePixelRatio 設定 initial-scale 來放大 viewport，使頁面按照物理畫素渲染，提升清晰度。