CSS中不同機關的對比

px（Pixel，像素），相對長度機關，是相對于顯示器螢幕分辨率而言的。

px沒有什麼特别的地方，設定多少px就顯示多少px；

em不同于px，它的值并不是固定不變的，不同情況下它設定的值是不一樣的。

情況一：給元素文字大小設定em，并且父元素有設定字型大小，那麼參考的就是父元素的字型大小。

示例代碼：給inner設定字型大小為2em，父元素box的字型大小為10px；

運作結果：最終inner的字型大小計算為20px

情況二：給元素文字大小設定em，但是父元素沒有設定字型大小，那麼參考的就是浏覽器預設的字型大小（谷歌浏覽器的預設字型大小為16px）。

情況三：給元素寬度和高度設定em，如果該元素本身設定了字型大小，那麼就參考自己的，如果本身沒有設定，那麼就參考父元素的字型大小；

元素本身設定了字型大小；

元素本身沒有設定字型大小；

不同的css屬性設定百分比，其參考的對象是不一樣的，舉例以下幾種情況：

情況一：給元素寬高設定百分比，參考對象為父元素對應寬高的百分比。

情況二：給元素邊距設定百分比，參考對象為該元素包含塊（一般指父元素）的寬度。

情況三：給元素字型大小設定百分比，參考對象為父元素的字型大小。

情況四：給定位元素的top、left、right、bottom設定百分比

如果是相對定位（relative），top和bottom參考的是父元素的高度，left和right參考的是父元素的寬度；

如果是絕對定位（absolute），參考的是最近一級設定定位的祖先級元素，沒有就是參考視口；

如果是固定定位（fixed），top和bottom參考的是視口的高度，left和right參考的是視口的寬度；

情況五：給元素的transform屬性的translate設定百分比，參考的是元素本身的寬高；

rem類似于em，不過rem隻相對于根元素（html）的字型大小，一般用作移動端适配。

比如：希望在不同螢幕下進行不同程度的文字縮放，就可以使用rem來适配，通過動态設定html的font-size。

方法一：使用媒體查詢；

方法二：使用js動态計算（最優方案）；

監聽螢幕大小的改變，然後操作DOM來改變内容顯示大小；

vw和vh分别是參考視口的寬度和高度的。

vw：1vw相當于視口寬度的1 / 100；

vh：1vh相當于視口高度的1 / 100；

百分比的參考對象比較多變，具體參考可以查閱MDN。

機關

參考

px

無需參考，設定多少就是多少

em

①自己有設定字型大小，就參考自己的；

②自己沒有設定，父元素有設定，就參考父元素的；

③自己和父元素都沒有設定，就參考浏覽器預設的字型大小；

④注意：如果父元素的字型大小也是設定em，那麼是參考先進行計算後的值；

%

①width/height：參考父元素的寬高；

②font-size：參考父元素的字型大小；

③margin：參考父元素的寬度；

④position：relative參考父元素的寬高，absolute參考最近一級擁有定位的祖先寬高，fixed參考視口寬高；

⑤translate：參考自己的寬高；

rem

隻參考根元素的字型大小

vw和vh

分别參考視口的寬高