rem和em學習筆記及CSS預處理

1、當元素A的字體單位是n rem時，它將根據根元素（html）的font-size的大小作為基準，比如

?View Code

parent-div中的em-div的font-size為2rem,他的基準就是html的字體大小10*2=20,并不受父元素的影響。width:10em;就是20*10，即寬度為200px;

2、重點理解:

有一個比較普遍的誤解，認為?em?單位是相對于父元素的字體大小。 事實上，它們是相對于使用em單位的元素的字體大小。

父元素的字體大小可以影響?em?值，但這種情況的發生，純粹是因為繼承。?

使用?em?單位存在繼承的時候，情況會變得比較棘手，因為每個元素將自動繼承其父元素的字體大小。 繼承效果只能被明確的字體單位覆蓋，比如px,vw。

使用?em?單位的元素字體大小根據它們來定。 但該元素可能繼承其父元素的字體大小，而父元素又繼承其父元素的字體大小，等等。 因此，以?em?為單位的元素字體大小可能會受到其任何父元素的字體大小影響。

可以通過比較以上代碼中帶有em-div-none和em-div-fontem樣式的div可以看出差別。

3、當?em?單位設置在?html?元素上時，它將轉換為em值乘以瀏覽器字體大小的設置，來作為html的font-size大小。那么，10em就是10*html的font-size;

4、總結 rem與 em 差異

• rem?單位翻譯為像素值是由?html?元素的字體大小決定的。 此字體大小會被瀏覽器中字體大小的設置影響，除非顯式重寫一個具體單位。
• em?單位轉為像素值，取決于他們使用的字體大小。 此字體大小受從父元素繼承過來的字體大小，除非顯式重寫與一個具體單位。

5、rem?單位提供最偉大的力量并不僅僅是他們提供一致尺寸而不繼承。

重要的是:

　　一些設計師使用結合?rem?單位的方式給html元素設置了一個固定的px單位。 這是很普遍的做法，所以改變html元素的字體大小時，可以使整個頁面做相應調整

　　這樣的話，它重寫繼承了用戶設置的瀏覽器字體大小。但是，這剝削了用戶自行調整以獲得最佳視覺效果的能力。

　　如果您確實需要更改 html 元素的字體大小，那么就使用em，rem單位，這樣根元素的值還會是用戶瀏覽器字體大小的乘積。

　　這將允許您通過更改您的?html?元素的字體大小，調整你的設計，但仍會保留用戶的瀏覽器設置的效果。

6、em?單位取決于一個font-size值而非?html?元素的字體大小。

主要適用于：

　　設計組件比如按鈕，菜單和標題可能會有自己明確的字體大小。 當你修改字體大小的時候，你希望整個組件都適當縮放。

　　通用屬性這一準則將適用于在非默認字體大小的元素上的padding、?margin、?width、?height和line-height等值。

　　當您使用?em?單位，他們使用的元素的字體大小應設置對rem單位，以保留的可擴展性，但避免繼承混淆。

7、使用 em 單位:

根據某個元素的字體大小做縮放而不是根元素的字體大小。

一般來說，你需要使用?em?單位的唯一原因是縮放沒有默認字體大小的元素。

根據我們上面的例子，設計組件比如按鈕，菜單和標題可能會有自己明確的字體大小。 當你修改字體大小的時候，你希望整個組件都適當縮放。

通用屬性這一準則將適用于在非默認字體大小的元素上的padding、?margin、?width、?height和line-height等值。

我建議，當您使用?em?單位，他們使用的元素的字體大小應設置對rem單位，以保留的可擴展性，但避免繼承混淆。

通常不使用?em?單位控制字體大小

我們經常會看到使用em作為字體大小單位，特別是標題，當我認為如果使用rem將更具可擴展性。

標題經常使用?em?單位的原因是他們相比px單位，在相對常規文本大小方面更出色。 然而?rem?單位同樣也可以實現這一目標。 如果?html?元素上任何字體大小調整，標題大小仍會縮放。

　　

我們可以想到的例子是一個使用?em?字體大小的下拉菜單，我們有第二個級別的菜單項文本大小取決于第一級字體大小。 另一個例子可能是用在按鈕里面的字體圖標，字體圖標的大小跟按鈕的文本大小有關。

?

然而，大多數 Web 設計中的元素往往不會有這種類型的要求，所以一般使用?rem?單位的字體大小，em?單位只在特殊的情況下使用。

8、這里理解的不到位，先記錄下來。

始終使用 rem 單位做媒體查詢

特別注意，當使用?rem?單位創建統一可擴展的設計，媒體查詢也應該是rem單位。 這將確保，無論用戶瀏覽器的字體大小，您的媒體查詢會對它作出反應和調整您的布局。

例如，如果用戶縮放文本非常高，您的布局可能需要從兩列到單個列調整，因為它可能會在較小的移動設備上顯示。

如果您的斷點在固定的像素寬度，只有不同的視口的大小可以觸發它們。 但是基于?rem?的斷點他們將響應不同的字體大小

9、

不要使用 em 或 rem的情況 :

多列布局

布局中的列寬通常應該是?%，因此他們可以流暢適應無法預知大小的視區。

然而單一列一般仍然應使用?rem?值來設置最大寬度。

當元素應該是嚴格不可縮放的時候

在一個典型的 Web 設計的過程中，不會有很多部分的你不能使用伸縮性設計的布局。 不過偶爾你會遇到真的需要使用顯式的固定的值，以防止縮放的元素。

采用固定的尺寸值的前提應該是，如果被縮放的話，它的結構會被打碎。 這真的不常出現，所以你想拿出那些?px?單位之前，問問自己是否使用它們是絕對必要的。

10、

總結

讓我們以一個快速符號點概括我們介紹的內容:

• rem?和?em?單位是由瀏覽器基于你的設計中的字體大小計算得到的像素值。
• em?單位基于使用他們的元素的字體大小。
• rem?單位基于?html?元素的字體大小。
• em?單位可能受任何繼承的父元素字體大小影響
• rem?單位可以從瀏覽器字體設置中繼承字體大小。
• 使用?em?單位應根據組件的字體大小而不是根元素的字體大小。
• 在不需要使用em單位，并且需要根據瀏覽器的字體大小設置縮放的情況下使用rem。
• 使用rem單位，除非你確定你需要?em?單位，包括對字體大小。
• 媒體查詢中使用?rem?單位
• 不要在多列布局中使用?em?或?rem?,改用%。
• 不要使用?em?或?rem，除非縮放會不可避免地導致要打破布局元素。

?

posted on 2017-05-09 16:55?趙大海 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/zhaodahai/p/6831416.html

總結

以上是生活随笔為你收集整理的rem和em学习笔记及CSS预处理的全部內容，希望文章能夠幫你解決所遇到的問題。

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