摘要：然后留個(gè)，可以看一下手機(jī)淘寶用上面方法怎么實(shí)現(xiàn)的用手機(jī)掃下面的二維碼吧或點(diǎn)擊去查看結(jié)束語(yǔ)其實(shí)想要適配好不同終端并不難，一定要理解好什么是物理像素什么是邏輯像素什么是，并且弄清楚他們之間的關(guān)系，我們這些搞前端的，不就是在與像素打交道嗎

rem由來(lái)：font size of the root element，那么rem是個(gè)單位，單位大小由它第一代老祖宗的font-size的大小決定。現(xiàn)在前端碼農(nóng)們?yōu)榱四茉诟鱾€(gè)屏幕上看到一個(gè)健康的網(wǎng)頁(yè)在默默的犧牲著自己的健康，因?yàn)椴粌H要知道rem是個(gè)單位，更重要的是要知道怎么能在不同分辨率下呈現(xiàn)的頁(yè)面都很NB。

事故造成原因：
1.px單位在PC上很流行，在手機(jī)屏幕上一看，MLGB的，同樣的12px卻小的跟螞蟻似的。
2.好不容易在iPhone4上調(diào)的正常了，換個(gè)菊花牌手機(jī)，MBD不堪入目了。
3.知道了rem的用法，但是html的font-size到底是多少才合適啊啊啊，媽蛋~。

好了，那么現(xiàn)在來(lái)解決這些問(wèn)題。
在解決之前，麻煩各位大嬸要了解一些你可能不想了解的東東（警告：不了解這些就不能知道真相喲~）：
1.物理像素(physical pixel)
我們看到的每個(gè)屏幕都是由一顆顆我們?nèi)庋垭y以看到的小顆粒（物理像素）組成的。

2.邏輯像素
是計(jì)算機(jī)坐標(biāo)系統(tǒng)中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如說(shuō)CSS像素)。

3.設(shè)備的像素比(device pixel ratio)簡(jiǎn)稱DPR
它的數(shù)值體現(xiàn)了物理像素和邏輯像素之間的關(guān)系，用公式可以計(jì)算出該設(shè)備的DPR的大小：

DPR = 物理像素 / 邏輯像素

那么了解了上面這些概念，就可以知道，為什么css在pc上寫著font-size=12px;但是換到手機(jī)上卻變小了？因?yàn)镈PR啊啊啊，大哥~。
沒錯(cuò)，我們?cè)陔娔X屏幕上的DPR是1，但是手機(jī)卻不同，可能是它可能是2，也可能是3。獲取設(shè)備DPR的方法還是有的：
1.在JavaScript中，通過(guò)window.devicePixelRatio來(lái)獲取
2.在css中，可以通過(guò)-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進(jìn)行媒體查詢，對(duì)不同DPR的設(shè)備，做一些樣式適配(這里只針對(duì)webkit內(nèi)核的瀏覽器和webview)。

本人也在網(wǎng)上看了不少動(dòng)態(tài)設(shè)置rem的文章，下面把幾個(gè)常用的列舉出來(lái)：
一，用媒體查詢來(lái)設(shè)置html的font-size：

@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;}
}

二、利用js來(lái)動(dòng)態(tài)設(shè)置

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

我要說(shuō)的是最后一種，也是我認(rèn)為目前比較好的實(shí)現(xiàn)方法：
利用js計(jì)算當(dāng)前設(shè)備的DPR，動(dòng)態(tài)設(shè)置在html標(biāo)簽上，并動(dòng)態(tài)設(shè)置html的font-size，利用css的選擇器根據(jù)DPR來(lái)設(shè)置不同DPR下的字體大小（這個(gè)方法很不錯(cuò)哦~）

!function(win, lib) {
    var timer,
        doc     = win.document,
        docElem = doc.documentElement,

        vpMeta   = doc.querySelector("meta[name="viewport"]"),
        flexMeta = doc.querySelector("meta[name="flexible"]"),
 
        dpr   = 0,
        scale = 0,
 
        flexible = lib.flexible || (lib.flexible = {});
 
    // 設(shè)置了 viewport meta
    if (vpMeta) {
 
        console.warn("將根據(jù)已有的meta標(biāo)簽來(lái)設(shè)置縮放比例");
        var initial = vpMeta.getAttribute("content").match(/initial-scale=([d.]+)/);
 
        if (initial) {
            scale = parseFloat(initial[1]); // 已設(shè)置的 initialScale
            dpr = parseInt(1 / scale);      // 設(shè)備像素比 devicePixelRatio
        }
 
    }
    // 設(shè)置了 flexible Meta
    else if (flexMeta) {
        var flexMetaContent = flexMeta.getAttribute("content");
        if (flexMetaContent) {
 
            var initial = flexMetaContent.match(/initial-dpr=([d.]+)/),
                maximum = flexMetaContent.match(/maximum-dpr=([d.]+)/);
 
            if (initial) {
                dpr = parseFloat(initial[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
 
            if (maximum) {
                dpr = parseFloat(maximum[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
        }
    }
 
    // viewport 或 flexible
    // meta 均未設(shè)置
    if (!dpr && !scale) {
        // QST
        // 這里的 第一句有什么用 ?
        // 和 Android 有毛關(guān)系 ?
        var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),
            _dpr = win.devicePixelRatio;
 
        // 所以這里似乎是將所有 Android 設(shè)備都設(shè)置為 1 了
        dpr = u ? ( (_dpr >= 3 && (!dpr || dpr >= 3))
                        ? 3
                        : (_dpr >= 2 && (!dpr || dpr >= 2))
                            ? 2
                            : 1
                  )
                : 1;
 
        scale = 1 / dpr;
    }
 
    docElem.setAttribute("data-dpr", dpr);
 
    // 插入 viewport meta
    if (!vpMeta) {
        vpMeta = doc.createElement("meta");
         
        vpMeta.setAttribute("name", "viewport");
        vpMeta.setAttribute("content",
            "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
 
        if (docElem.firstElementChild) {
            docElem.firstElementChild.appendChild(vpMeta)
        } else {
            var div = doc.createElement("div");
            div.appendChild(vpMeta);
            doc.write(div.innerHTML);
        }
    }
 
    function setFontSize() {
        var winWidth = docElem.getBoundingClientRect().width;
 
        if (winWidth / dpr > 540) {
            (winWidth = 540 * dpr);
        }
 
        // 根節(jié)點(diǎn) fontSize 根據(jù)寬度決定
        var baseSize = winWidth / 10;
 
        docElem.style.fontSize = baseSize + "px";
        flexible.rem = win.rem = baseSize;
    }
 
    // 調(diào)整窗口時(shí)重置
    win.addEventListener("resize", function() {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 300);
    }, false);
 
     
    // 這一段是我自己加的
    // orientationchange 時(shí)也需要重算下吧
    win.addEventListener("orientationchange", function() {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 300);
    }, false);
 
 
    // pageshow
    // keyword: 倒退 緩存相關(guān)
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
 
    // 設(shè)置基準(zhǔn)字體
    if ("complete" === doc.readyState) {
        doc.body.style.fontSize = 12 * dpr + "px";
    } else {
        doc.addEventListener("DOMContentLoaded", function() {
            doc.body.style.fontSize = 12 * dpr + "px";
        }, false);
    }
  
    setFontSize();
 
    flexible.dpr = win.dpr = dpr;
 
    flexible.refreshRem = setFontSize;
 
    flexible.rem2px = function(d) {
        var c = parseFloat(d) * this.rem;
        if ("string" == typeof d && d.match(/rem$/)) {
            c += "px";
        }
        return c;
    };
 
    flexible.px2rem = function(d) {
        var c = parseFloat(d) / this.rem;
         
        if ("string" == typeof d && d.match(/px$/)) {
            c += "rem";
        }
        return c;
    }
}(window, window.lib || (window.lib = {}));

忘了說(shuō)了，手機(jī)淘寶很多頁(yè)面用的就是這種方法來(lái)適配終端的。

然后留個(gè)demo，可以看一下手機(jī)淘寶用上面方法怎么實(shí)現(xiàn)的（用手機(jī)掃下面的二維碼吧）：

或點(diǎn)擊去查看
結(jié)束語(yǔ)：
其實(shí)想要適配好不同終端并不難，一定要理解好什么是物理像素、什么是邏輯像素、什么是DPR，并且弄清楚他們之間的關(guān)系，我們這些搞前端的，不就是在與像素打交道嗎？