瀏覽器最終渲染出的頁面是以具體的像素為單位的(因為顯示器的顯示原理是基于像素的啊)，瀏覽器通過計算em和rem，最終再將這些相對單位轉換為具體的像素值渲染出來。這三者可以這樣理解：

px是絕對單位，獨來獨往，棱角分明，一就是一，二就是二，1px就是顯示器上的1像素；

em是相對單位，典型的大孝子，唯父母之命是從，自己沒有半點主張，全憑父母做主；

rem也是相對單位，是個大家族，老祖宗是html，下面所有人都聽老祖宗的。

下面舉個例子來加深下印象：

問題：讓一段文字的開頭一行縮進兩個字符，用哪個？

我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字

我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字

我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字

上面的3個case實現的效果都是一樣的，但方式方法不盡相同：px簡單粗暴，em簡潔易懂，rem需要計算。這里很明顯case2的方法是首選(無需計算，代碼簡潔易懂，靈活性強)，這樣無論這個段落的字體大小如何變動，其首行總是會縮進2個字符，因為縮進的長度是根據當前段落的字體大小由瀏覽器計算出來的。

這么看來em是最好的單位了？非也！上面的例子只是千千萬實際場景中的一種，我們再發散一下思維，假如頁面要做全端(PC、Pad、手機)響應式，咋辦？用px的話，每個media query里都要把涉及的px尺寸定義一遍，就像下面這樣：@media?screen?and?(min-width:320px)?and?(max-width:640px)?{

.wrapper?{width:320px;}

.content?{font-size:12px;}

}

@media?screen?and?(min-width:900px)?and?(max-width:1280px)?{

.wrapper?{width:900px;}

.content?{font-size:14px;}

}

@media?screen?and?(min-width:1440px)?{

.wrapper?{width:1440px;}

.content?{font-size:16px;}

}

可以看出此時用px單位的代碼成本比較高，這時候使用em是個好辦法，但如果頁面層級比較復雜，父級套父級呢？我們知道 em 的計算是基于父級元素的，所以這時候會非常不方便，此時就是rem單位大顯神威的時候了，只需定義根元素 html 的字體px大小值，其他rem單位會自動根據這個值計算，再也不用擔心父級元素的font-size了，因為它始終是基于根元素(html) 的。另外，使用rem單位時要注意瀏覽器兼容性。

綜上，這三個單位沒有好壞之分，都是很有用的屬性單位，根據實際情況合理使用能為頁面布局排版帶來便利。

總結

以上是生活随笔為你收集整理的在html中2em是多少px,在css设置单位px、em、rem哪个更好？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。