rem和em學(xué)習(xí)筆記及CSS預(yù)處理

1、當(dāng)元素A的字體單位是n rem時(shí)，它將根據(jù)根元素（html）的font-size的大小作為基準(zhǔn)，比如

?View Code

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

2、重點(diǎn)理解:

有一個(gè)比較普遍的誤解，認(rèn)為?em?單位是相對(duì)于父元素的字體大小。 事實(shí)上，它們是相對(duì)于使用em單位的元素的字體大小。

父元素的字體大小可以影響?em?值，但這種情況的發(fā)生，純粹是因?yàn)槔^承。?

使用?em?單位存在繼承的時(shí)候，情況會(huì)變得比較棘手，因?yàn)槊總€(gè)元素將自動(dòng)繼承其父元素的字體大小。 繼承效果只能被明確的字體單位覆蓋，比如px,vw。

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

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

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

4、總結(jié) rem與 em 差異

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

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

重要的是:

　　一些設(shè)計(jì)師使用結(jié)合?rem?單位的方式給html元素設(shè)置了一個(gè)固定的px單位。 這是很普遍的做法，所以改變html元素的字體大小時(shí)，可以使整個(gè)頁面做相應(yīng)調(diào)整

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

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

　　這將允許您通過更改您的?html?元素的字體大小，調(diào)整你的設(shè)計(jì)，但仍會(huì)保留用戶的瀏覽器設(shè)置的效果。

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

主要適用于：

　　設(shè)計(jì)組件比如按鈕，菜單和標(biāo)題可能會(huì)有自己明確的字體大小。 當(dāng)你修改字體大小的時(shí)候，你希望整個(gè)組件都適當(dāng)縮放。

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

　　當(dāng)您使用?em?單位，他們使用的元素的字體大小應(yīng)設(shè)置對(duì)rem單位，以保留的可擴(kuò)展性，但避免繼承混淆。

7、使用 em 單位:

根據(jù)某個(gè)元素的字體大小做縮放而不是根元素的字體大小。

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

根據(jù)我們上面的例子，設(shè)計(jì)組件比如按鈕，菜單和標(biāo)題可能會(huì)有自己明確的字體大小。 當(dāng)你修改字體大小的時(shí)候，你希望整個(gè)組件都適當(dāng)縮放。

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

我建議，當(dāng)您使用?em?單位，他們使用的元素的字體大小應(yīng)設(shè)置對(duì)rem單位，以保留的可擴(kuò)展性，但避免繼承混淆。

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

我們經(jīng)常會(huì)看到使用em作為字體大小單位，特別是標(biāo)題，當(dāng)我認(rèn)為如果使用rem將更具可擴(kuò)展性。

標(biāo)題經(jīng)常使用?em?單位的原因是他們相比px單位，在相對(duì)常規(guī)文本大小方面更出色。 然而?rem?單位同樣也可以實(shí)現(xiàn)這一目標(biāo)。 如果?html?元素上任何字體大小調(diào)整，標(biāo)題大小仍會(huì)縮放。

　　

我們可以想到的例子是一個(gè)使用?em?字體大小的下拉菜單，我們有第二個(gè)級(jí)別的菜單項(xiàng)文本大小取決于第一級(jí)字體大小。 另一個(gè)例子可能是用在按鈕里面的字體圖標(biāo)，字體圖標(biāo)的大小跟按鈕的文本大小有關(guān)。

?

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

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

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

特別注意，當(dāng)使用?rem?單位創(chuàng)建統(tǒng)一可擴(kuò)展的設(shè)計(jì)，媒體查詢也應(yīng)該是rem單位。 這將確保，無論用戶瀏覽器的字體大小，您的媒體查詢會(huì)對(duì)它作出反應(yīng)和調(diào)整您的布局。

例如，如果用戶縮放文本非常高，您的布局可能需要從兩列到單個(gè)列調(diào)整，因?yàn)樗赡軙?huì)在較小的移動(dòng)設(shè)備上顯示。

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

9、

不要使用 em 或 rem的情況 :

多列布局

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

然而單一列一般仍然應(yīng)使用?rem?值來設(shè)置最大寬度。

當(dāng)元素應(yīng)該是嚴(yán)格不可縮放的時(shí)候

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

采用固定的尺寸值的前提應(yīng)該是，如果被縮放的話，它的結(jié)構(gòu)會(huì)被打碎。 這真的不常出現(xiàn)，所以你想拿出那些?px?單位之前，問問自己是否使用它們是絕對(duì)必要的。

10、

總結(jié)

讓我們以一個(gè)快速符號(hào)點(diǎn)概括我們介紹的內(nèi)容:

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

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/zhaodahai/p/6831416.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。