作為一名前端開發工程師，很有必要梳理並記錄下自己成長過程中的問題，以溫故知新。

儘量做到：

1. 把前端開發成長中遇到的概念，原子性的拆分開，單獨的去理解學習；
2. 不新增太多個人情感化詞句，以知識為中心；
3. 會運用，不等於理解，文章側重於理解

？rem是什麼

rem是css中的單位。

類同舉例:

height: 1px

表示height的值為1個css畫素；

vertial-align: 50%

表示vertial-align的值為設定該樣式的元素的當前line-height 的高度的一半；

width: 1rem

表示width的值為1 倍的dom文件的html標籤上font-size的值，即如果html的font-size為14px，那麼width

的值就是1倍的14px，即14px.
 
px, %, rem均表示一種單位

? 進一步理解rem

一些效果需要根據外部盒子的大小自適應，是一個因變數。

div {
	width: 50%;
}

例如設定div寬度為50%，表示匹配的div會是外部盒子寬度的一半，通過這種設定，改變了外部盒子寬度後，這些div會跟著調整寬度，即這些div表示為響應式的。
可以理解為：響應的佈局需要有一個參照點，對於上面的例子，該參照點為父級元素
響應式頁面中，通常整個頁面的大部分元素都要根據參照點表現為響應式的，而統一的參考點的最好選擇就是dom最外層的html。
至此，應該不難理解rem的存在意義了。

？如何使用rem

通常設計師提供的效果圖都是指定寬度的效果，如750px等，因此可以在編寫html時，一開始就設定整個dom文件html標籤的font-size，假設設定的font-size為x，然後頁面的其他元素便可以根據這個參照點，計算出大小並以rem作為單位。

？如何適配解析度不同的裝置

可以動態的改變上述中的x值，即可使得頁面中設定了rem的元素大小對應變化。
因此可以在html文件中新增javascript指令碼，動態設定x。相關程式碼：

;(function(win, doc) {
    'use strict';
    var options = { width: 750, dpr: win.devicePixelRatio }
 
;
    var html = doc.documentElement,
        width = html.getAttribute('data-width') || options.width,
        dpr = html.getAttribute('data-dpr') || options.dpr,
        viewPort = doc.querySelector('meta[name="viewport"]'),
        rotate = win.onorientationchange ? 'orientationchange' : 'resize';

    // 設定html fontSize
    function setSize() {
        var winWidth = win.innerWidth || html.clientWidth;
        html.style.fontSize = 100 * winWidth / width + 'px';
    };

    // 設定 initial-scale
    function setScale() {
        setSize();
        var viewContent = viewPort.getAttribute('content');
        var reg = /initial-scale=(\d(.\d+)?)/i;
        var matchRes = viewContent.match(reg);
        var scale = 1 / parseInt(dpr);
        if (matchRes && matchRes[1] == scale) {
            return;
        }
        var newContent = viewContent.replace(reg, function(a, b) {
            return a.replace(/\d(.\d+)?/i, scale);
        });
        viewPort.setAttribute('content', newContent);
    };
    
    win.addEventListener(rotate, setSize);
    window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
    requestAnimationFrame(setScale);
}(window, document));

至此，結束。