CSS 中 px、rem 與 em

em整理:

任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼 12px=0.75em,10px=0.625em。爲了簡化 font-size 的換算,需要在 css 中的 body 選擇器中聲明Font-size=62.5%,這就使 em 值變爲 16px*62.5%=10px, 這樣 12px=1.2em, 10px=1em, 也就是說只需要將你的原來的 px 數值除以10,然後換上 em 作爲單位就行了。
所以我們在寫 CSS 的時候,需要注意幾點:
body 選擇器中聲明 Font-size=62.5%;
將你的原來的 px 數值除以 10,然後換上 em 作爲單位;
重新計算那些被放大的字體的 em 數值。避免字體大小的重複聲明。<br>
也就是避免 1.2 * 1.2= 1.44 的現象。比如說你在#content中聲明瞭字體大小爲1.2em,那麼在聲明p的字體大小時就只能是1em,而不是 1.2em, 因爲此 em 非彼 em,它因繼承#content的字體高而變爲了 1em=12px。

why:

em 單位取決於一個font-size值而非 html 元素的字體大小。<br>爲此,em 單位的主要目的應該是允許保持在一個特定的設計元素範圍內的可擴展性<br>例如,您可能使用 em 值設置導航菜單項的 padding、 margin,line-height 等值。帶有 0.9rem 字體大小的菜單<br>通過這種方式,如果您更改菜單的字體大小菜單項周圍的間距將在剩餘的空間按比例縮放

 

Rem整理:

根 html 元素將繼承瀏覽器中設置的字體大小,除非顯式設置固定值去覆蓋。所以 html 元素的字體大小雖然是<br><br>直接確定 rem 值,但字體大小可能首先來自瀏覽器設置。因此瀏覽器的字體大小設置可以影響每個使用 rem<br><br> 單元以及每個通過 em 單位繼承的值。

Rem 單位提供最偉大的力量並不僅僅是他們提供一致尺寸而不是繼承。 相反,它給我們的一個途經去獲取用<br><br>戶的偏好來影響網站中每一處使用rem的元素大小,不再是使用固定的 px 單位。爲此,使用 rem 單位的主要<br><br>目的應該是確保無論用戶如何設置自己的瀏覽器,我們的佈局都能調整到合適大小

1.rem 與 em:
rem 單位翻譯爲像素值是由 html 元素的字體大小決定的。 此字體大小會被瀏覽器中字體大小的設置影響,除非顯式重寫一個具體單位。<br>em 單位轉爲像素值,取決於他們使用的字體大小。 此字體大小受從父元素繼承過來的字體大小,除非顯式重寫與一個具體單位。
2.px 與 rem:
對於只需要適配少部分手機設備,且分辨率對頁面影響不大的,使用px即可 。<br>對於需要適配各種移動設備,使用rem,例如只需要適配 iPhone 和 iPad 等分辨率差別比較挺大的設備。
3.綜述:
rem 和 em 單位是由瀏覽器基於你的設計中的字體大小計算得到的像素值。
em 單位基於使用他們的元素的字體大小。
rem 單位基於 html 元素的字體大小。
em 單位可能受任何繼承的父元素字體大小影響
rem 單位可以從瀏覽器字體設置中繼承字體大小。
使用 em 單位應根據組件的字體大小而不是根元素的字體大小。
在不需要使用em單位,並且需要根據瀏覽器的字體大小設置縮放的情況下使用rem。
使用rem單位,除非你確定你需要 em 單位,包括對字體大小。
媒體查詢中使用 rem 單位
不要在多列布局中使用 em 或 rem 改用 %。
不要使用 em 或 rem,如果縮放會不可避免地導致要打破布局元素。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章