徹底弄懂css中單位px和em,rem的區別

2021-09-07 12:10:55 字數 610 閱讀 2171

px:

px實際上就是畫素,用px設定字型大小時,比較穩定和精確。但是這種方法存在乙個問題,當使用者在瀏覽器中瀏覽我們製作的web頁面時,

如果改變了瀏覽器的縮放,這時會使用我們的web頁面布局被打破。這樣對於那些關心自己**可用性的使用者來說,就是乙個大問題了。

因此,這時就提出了使用「em」來定義web頁面的字型。

em:em就是根據基準來縮放字型的大小。em實質是乙個相對值,而非具體的數值。這種技術需要乙個參考點,一般都是以的「font-size」

為基準。如wordpress官方主題twenntytwelve的基準就是14px=1em。

另外,em是相對于父元素的屬性而計算的

rem:

em是相對於其父元素來設定字型大小的,這樣就會存在乙個問題,進行任何元素設定,都有可能需要知道他父元素的大小。

而rem是相對於根元素,這樣就意味著,我們只需要在根元素確定乙個參考值。

瀏覽器的相容性

除了ie6-ie8r,其它的瀏覽器都支援em和rem屬性,px是所有瀏覽器都支援。

因此為了瀏覽器的相容性,可「px」和「rem」一起使用,用"px"來實現ie6-8下的效果,然後使用「rem」來實現代瀏覽器的效果。

徹底弄懂css中單位px和em的區別

國內的設計師大都喜歡用px,而國外的 大都喜歡用em,那麼兩者有什麼區別,又各自有什麼優劣呢?1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em作為字型單位 3.firefox能夠調整px和em,但是96 以上的中國網民使用ie瀏覽器 或核心 px畫素 ...

徹底弄懂css中字型單位px和em,rem的區別

國內的設計師大都喜歡用px,而國外的 大都喜歡用em和rem,那麼三者有什麼區別,又各自有什麼優劣呢?px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em,rem,但是96 以上的中國網民...

徹底弄懂css中單位px和em,rem的區別

國內的設計師大都喜歡用px,而國外的 大都喜歡用em和rem,那麼三者有什麼區別,又各自有什麼優劣呢?px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em,rem,但是96 以上的中國網民...