相比px而言，在響應式web設計中，em有何優勢？

我把html中所有長寬全部改用百分比，為了更好的適配不同尺寸的顯示設備，而字體這塊一直沒有很好的解決辦法，1em=16px，em的值並不是根據顯示器寬度設置的百分比，那為什麼還要將px改為em？我該怎麼讓我的字體大小也能有效的配合整體的百分比寬度？

---

px 是相對於屏幕解析度而言的，一個小格子就代表一個 px 在不同解析度的屏幕上，高分屏的 px 字體看起來會比低分屏的「小」，但事實上它們是一樣大小的。

em 是根據元素字體大小定義的（如果本元素沒有定義字體大小那麼就以父元素字體大小為準，以此類推），字體大小是多少 px，該元素的 1em 就等於多少 px，所以 em 的優勢就是可以根據屏幕解析度的變化等比例地縮放字體。但是用 em 很不方便的地方就是隨時都要考慮元素的字體大小，為了彌補這個缺點便出現了 rem。

rem 跟 em 不同的地方在於 rem 是根據根元素（html）的字體大小來確定的，像一般默認的 html 的字體大小是 16px

html {
font-size: 16px;
}


這時你的元素使用 rem 來定義字體大小的話都要根據這個根元素的大小來確定比如定義 div 字體大小為 12px 的話：

div {
font-size: 0.75rem; //這裡 12/16 = 0.75
}


一般 CSS 預處理都會自動計算 rem 值，但如果嫌麻煩可以給 html 根元素設置一個方便的值比如

html {
font-size: 62.5%; //這裡 10/16 = 0.625
}


這樣你給其他元素設置 rem 值的時候只需要將你想要的 px 值除以 10 就好啦！

div {
font-size: 1.6rem //想要 16px 大小的話只要除以 10 就行了
}


最後附上鏈接一枚

px em rem在WEB前端開發中的區別

---

em不是等於16px.

1em是等於父對象的字體大小.

要靠@media來控制不同解析度下默認字體大小, 然後靠em控制該解析度下的字體大小.

---

並不是1em=16px

em是一個相對單位，他的大小是相對於父級設定的字體大小的。

比如

&

&這是父級元素

&這是子級元素&

&

&

這種情況下，1em就=16px；

如果這樣寫

&

&這是父級元素

&這是子級元素&

&

&

這種情況下，1em就=12px；

同理，如果把1em改成0.5em，那麼就是6px；

---

推薦閱讀：