css中單位px和em,rem的區別

2021-09-07 12:09:50 字數 610 閱讀 3541

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,rem的區別

px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em,rem,但是96 以上的中國網民使用ie瀏覽器 或核心 px畫素 pixel 相對長度單位。畫素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的區別

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