移動端開發之px，em和rem詳解

px:表示的是絕對的像素值，1px就是1像素大小

em:關於em，網上有資料說是關於父元素的，但是其實個人感覺這種說法是不對的，其實em的大小是根據自身的font-size確定的，而只是正常的情況下子元素繼承了父元素的font-size

rem:是指根元素的大小，比如跟元素大小是16px(瀏覽器默認font-size)，那么1rem的大小就是16px

舉個例子：

我們先來寫一段代碼：

    <div class='div1'>
        <div class='div2'></div>
    </div>

 

        .div1{
            width: 100px;
            height: 100px;
            font-size: 16px;
        }
        .div2{
            width: 1em;
            height: 1em;
            background: red;
        }    

上面的代碼中，我們在瀏覽器運行就會得到結果，div2的width和height為16px，也就是現在div2元素的font-size的值也就是他的父元素設置的font-size的值，下面我們來改寫下上面代碼的css：

        .div1{
            width: 100px;
            height: 100px;
            font-size: 16px;
        }
        .div2{
            width: 1em;
            height: 1em;
            font-size: 12px;
            background: red;
        }

當我們在div2的style里面設置了自己的font-size為12px，我們在運行代碼，我們可以得到我們當前的div2中的width和height的值為12px。這樣子我們就可以得到結論，em的值其實是根據自己來設定的，准確的說是自己的font-size的值，由此可見網上很多說em是相對於父元素的值的說法是錯誤的。

但是在開發中我們的每個元素都有不同的font-size那么我們就需要根據這個計算出不同的width和height的em值，這樣子無論是開發還是維護起來成本都太高了，還有一個更嚴重的問題是層級嵌套會讓我們對每個元素的font-size變得混亂。

所以一個更加友好的元素rem誕生。

所謂的rem根據的就是跟節點的font-size的值，舉個例子：

        html{
            font-size: 20px;
        }
        .div1{
            width: 1rem;
            height: 1rem;
            font-size: 12px;
            background: red;
        }

        <div class='div1'></div>

運行上面的代碼，我們得到了當前div的width和height的值為20px，看來rem集成的是html的font-size並沒有繼承自己的font-size這樣子我們開發起來就有一個相對的值了，這樣的意義在於我們可以根據不同頁面的width來設置不同的font-size值來實現移動端的適配問題，這個也就是手淘flexible的設計原理了，下一章我將會給大家講解一下關於flexible的源代碼！