如何更愉快地使用rem —— 別說你懂CSS相對單位

Snailclimb 發(fā)布于2019-08-30 15:54 / 2803人閱讀

摘要：值得注意的是，這個(gè)設(shè)置對使用或其他絕對單位定義的字號(hào)大小無效。事實(shí)上，提供了一個(gè)在和間的相對單位折中解決方案，而且更易于使用。圖使用相對單位和繼承字號(hào)的面板下面是模板，加到你的頁面吧。

前段時(shí)間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對relative units的講解和舉例可以說相當(dāng)全面，看完之后發(fā)現(xiàn)自己并不太懂CSS相對單位，也希望分享給大家，所以有了這個(gè)譯文系列。（若有勘誤或翻譯建議，歡迎 Github PR ^_^）

《別說你懂CSS相對單位》系列譯文：

如何更愉快地使用em

如何更愉快地使用rem [本文]

視口相關(guān)單位的應(yīng)用

無單位數(shù)字和行高

CSS自定義屬性

本文對應(yīng)的章節(jié)目錄：

2.2 em和rem

2.2.2 對font-size使用rem

可用性：對font-size使用相對長度單位

2.3 停止使用像素思維去思考

2.3.1 設(shè)置一個(gè)合理的字號(hào)默認(rèn)值

2.3.3 讓這個(gè)面板變得“響應(yīng)式”

2.3.3 調(diào)整單個(gè)組件的大小

2.2 em和rem 2.2.2 對font-size使用rem

當(dāng)瀏覽器解析HTML文檔時(shí)，創(chuàng)建了一個(gè)用來代表頁面元素的集合，叫做DOM（文檔對象模型，Document Object Model）。樹狀結(jié)構(gòu)，每一個(gè)節(jié)點(diǎn)代表一個(gè)元素。就是頂層節(jié)點(diǎn)（根節(jié)點(diǎn)），在下面的是它的子節(jié)點(diǎn)和，再往下就是它們的子節(jié)點(diǎn)，還有后代節(jié)點(diǎn)，如此類推。

根節(jié)點(diǎn)是文檔里所有其他元素的祖先。它有一個(gè)特別的偽類（pseudo-class）選擇器（:root），在樣式表里可以用這個(gè)選擇器表示。使用帶類名的類型選擇器html，或者直接用標(biāo)簽選擇器，效果是一樣的。

rem是根em（root em）的縮寫。rem是和根元素關(guān)聯(lián)的，不依賴當(dāng)前元素。不管你在文檔中的什么地方使用這個(gè)單位，1.2rem的計(jì)算值是相等的，等于1.2倍的根元素的字號(hào)大小。下面的示例代碼中，聲明了根元素的字號(hào)大小，并在嵌套的無序列表中使用rem聲明字號(hào)大小。

[ 代碼片段 2.10 使用rem聲明字號(hào)大小 ]

:root {                    1
  font-size: 1em;          2
}

ul {
  font-size: .8rem;
}

1 偽類 :root 等價(jià)于 html 選擇器

2 使用瀏覽器的默認(rèn)字號(hào)大小（16px）

在這個(gè)示例里，根字號(hào)大小是瀏覽器的默認(rèn)大小16px（根元素的1em等于瀏覽器的默認(rèn)字號(hào)大?。o序列表的字號(hào)大小為0.8rem，計(jì)算結(jié)果是12.8px。因?yàn)檫@只跟根元素相關(guān)，盡管你在列表里嵌套了列表，嵌套子列表的字號(hào)仍然保持不變。

可用性：對font-size使用相對長度單位
一些瀏覽器會(huì)提供給用戶2種方式定制文字的大?。嚎s放和設(shè)置一個(gè)默認(rèn)的字號(hào)大小。通過按Ctrl+或者Ctrl-，用戶可以對頁面進(jìn)行縮放。這在視覺上會(huì)把整個(gè)頁面的文字或圖片（其實(shí)是所有元素）都放大或縮小了。在一些瀏覽器，這個(gè)改變只針對當(dāng)前的標(biāo)簽頁且是臨時(shí)的，不會(huì)影響到新開的標(biāo)簽頁。 
設(shè)置默認(rèn)字號(hào)大小，會(huì)有點(diǎn)不一樣。不僅僅是設(shè)置的入口比較難找（一般在瀏覽器的設(shè)置頁），而且這個(gè)設(shè)置是永久的，直到用戶把默認(rèn)值還原。值得注意的是，這個(gè)設(shè)置對使用px或其他絕對單位定義的字號(hào)大小無效。因?yàn)槟J(rèn)字號(hào)大小對一些用戶是必要的，尤其是弱視的群體，你應(yīng)該用相對單位或百分比來定義字號(hào)的大小。

rem簡化了很多em帶來的復(fù)雜度。事實(shí)上，rem提供了一個(gè)在px和em間的相對單位折中解決方案，而且更易于使用。那么，是不是意味著你應(yīng)該在對所有元素都使用rem，去掉其他長度單位呢？當(dāng)然不是。

在CSS的世界里，這個(gè)答案通常是，看情況。rem只是你的工具箱中的其中一個(gè)。掌握CSS很重要的一點(diǎn)，就是學(xué)會(huì)分辨在什么場景下該使用什么工具。我的選擇是，對font-size使用rem，對border使用px，對其他的度量方式如padding、margin、border-radius等使用em。然而在必要時(shí)，需要聲明容器的寬度的話，我更喜歡使用百分比。

這樣，字號(hào)大小就變得可預(yù)測，而當(dāng)其他因素影響到元素的字號(hào)大小時(shí)，你也可以借助em去縮放元素的padding和margin。在border上使用像素是很合適的，尤其當(dāng)你想要一根漂亮的線的時(shí)候。以上就是我對不同屬性使用不同單位的理想方案，不過我要再次聲明，這些都是工具，在某些特定場景下，利用不同的工具可能取到更好的效果。

提示  當(dāng)你不確定的時(shí)候，對font-size使用rem，對border使用px，以及對其他大多數(shù)屬性使用em。

2.3 停止使用像素思維去思考

把頁面的根元素字號(hào)大小定義為0.625em或者62.5%，在最近幾年來，這樣的用法很常見，這是一種模式，或者更貼切地說，這是一種反模式。

[ 代碼片段 2.11 反模式：全局地把font-size定義為10px ]

html {
  font-size: .625em;
}

我并不推薦這種用法。這個(gè)用法把瀏覽器默認(rèn)的字號(hào)大小16px縮小到10px。這樣做的好處是簡化了計(jì)算，如果設(shè)計(jì)師告訴你字號(hào)大小應(yīng)該是14px，那你可以很輕易地計(jì)算出1.4rem，畢竟我們還是在使用相對單位。

一開始，這看起來很方便，但事實(shí)上這樣的實(shí)現(xiàn)方式有兩個(gè)問題。第一，強(qiáng)制你寫了很多重復(fù)的樣式代碼。10px對于大多數(shù)文本來說太小了，你需要在整個(gè)頁面中，來來回回地覆蓋它。你會(huì)發(fā)現(xiàn)，自己把一段段落（

）的字號(hào)大小聲明為1.4rem，然后又把導(dǎo)航（

）的鏈接字號(hào)大小聲明為1.4rem，樣式代碼中還有很多這樣的用法。這樣引入了更高的錯(cuò)誤風(fēng)險(xiǎn)，當(dāng)你需要修改時(shí)發(fā)現(xiàn)代碼耦合程度比較高，同時(shí)也會(huì)讓樣式文件變大。

第二個(gè)問題是，你這么做的時(shí)候，其實(shí)你還是在用像素的思維在思考。雖然在代碼里寫的是1.4rem，但是在你的腦子里，其實(shí)還是想的是14px。在響應(yīng)式網(wǎng)頁開發(fā)中，你應(yīng)該學(xué)會(huì)適應(yīng)那些“模糊”的值。1.2em實(shí)際等于多少像素，并不重要，你只需要知道這是比繼承的字號(hào)大一點(diǎn)點(diǎn)，那就足夠了。而且，如果在屏幕上這不是你想要的效果，那就改吧。這是需要時(shí)間實(shí)驗(yàn)和試錯(cuò)的，但事實(shí)上，使用px的時(shí)候我們也需要這樣做。（在第13章，我們會(huì)有更具體的方式來優(yōu)化這個(gè)實(shí)現(xiàn)方式。）

當(dāng)使用em時(shí)，我們很容易陷入糾結(jié)，這個(gè)值轉(zhuǎn)化成像素值會(huì)是多少呢？尤其對于字號(hào)大小。你一直在乘和除以em值，這樣你很快就會(huì)瘋掉了。相反，我希望你可以接受一項(xiàng)挑戰(zhàn)，嘗試培養(yǎng)先開始使用em的習(xí)慣。如果你習(xí)慣使用像素，那轉(zhuǎn)成em是需要一定時(shí)間和練習(xí)的，但相信我，這很值得。

這不是在說你再也不使用像素了。如果你跟一個(gè)設(shè)計(jì)師合作，你可能需要用更精確的像素值去溝通，這沒問題的。在項(xiàng)目的開始，你需要聲明一個(gè)基礎(chǔ)的字號(hào)大?。ㄍǔＪ菍?biāo)題或者標(biāo)注的常用字號(hào)）。使用絕對值去描述大小，往往會(huì)更加容易。

轉(zhuǎn)換成rem會(huì)有計(jì)算環(huán)節(jié)，那就讓計(jì)算器去忙吧（通常我會(huì)在Mac電腦上按cmd+空格，在Spotlight里計(jì)算）。首先在根元素上聲明根字號(hào)大小，從那開始，使用像素應(yīng)該是例外的情況，而不是常態(tài)。

在這章內(nèi)容里，我還是會(huì)持續(xù)地聊起像素。這會(huì)有助于我解釋相對單位的工作原理，同時(shí)也能幫助你培養(yǎng)計(jì)算em值的習(xí)慣。在這章之后，我基本會(huì)使用相對單位來討論字號(hào)的大小。

2.3.1 設(shè)置一個(gè)合理的字號(hào)默認(rèn)值

先假設(shè)你想把默認(rèn)字號(hào)設(shè)定為14px。把10px設(shè)定為基準(zhǔn)值，再在頁面中去覆蓋它的寫法，我們不推薦這種寫法，相反，你應(yīng)該在根元素上直接聲明一個(gè)值。
在這個(gè)代碼片段里，目標(biāo)字號(hào)值是繼承的，瀏覽器的默認(rèn)值16px，那么14/16 = 0.875。

把下面的代碼添加到一個(gè)新的樣式表的最上面，我們會(huì)在這上面添加其他代碼。這里設(shè)定根元素（）的默認(rèn)字號(hào)大小。

[ 代碼片段 2.12 設(shè)定正確的默認(rèn)字號(hào)大小 ]

:root {                    1
  font-size: 0.875em;      2
}

1 或者使用 HTML 選擇器

2 14/16（期望值px / 繼承值px）等于0.875

現(xiàn)在，你的期望基準(zhǔn)字號(hào)14px對整個(gè)頁面的元素有效，你不需要在其他地方重新聲明了。你只需要在設(shè)計(jì)不一樣的地方修改成新的字號(hào)，譬如標(biāo)題。

我們一起來創(chuàng)建圖2.7那樣的面板吧！你創(chuàng)建的這個(gè)面板，基于14px字號(hào)，使用相對單位。

[ 圖 2.7 使用相對單位和繼承字號(hào)的面板 ]

下面是模板，加到你的頁面吧。

[ 代碼片段 2.13 面板的模板 ]


  Single-origin
  
    We have built partnerships with small farms around the world to
    hand-select beans at the peak of season. We then carefully roast
    in small batches to maximize their
    potential.

下一段代碼是樣式的。你會(huì)在padding和border-radius使用em，標(biāo)題的字號(hào)使用rem，以及border使用px。把下面代碼添加到你的樣式表吧。

[ 代碼片段 2.14 使用相對單位的面板 ]

.panel {
  padding: 1em;                    1
  border-radius: 0.5em;            1
  border: 1px solid #999;          2
}

.panel > h2 {
  margin-top: 0;                   3
  font-size: 0.8rem;               4
  font-weight: bold;               4
  text-transform: uppercase;       4
}

1 對padding和border-radius使用em

2 用1px定義細(xì)邊框

3 把面板上面多余的空間去掉，更多解釋看第3章

4 用rem控制標(biāo)題的字號(hào)大小

這段代碼給面板添加了一個(gè)細(xì)邊框以及定義了標(biāo)題的樣式。我希望標(biāo)題的字號(hào)小一點(diǎn)，但要加粗和全是大寫。（你可以根據(jù)自己的設(shè)計(jì)，把字號(hào)改大點(diǎn)或者使用不同的排版方式）

第二個(gè)選擇器>是一個(gè)直接后代組合選擇符（direct descendant combinator），它代表的是.panel下的子元素h2。更完整的選擇器和組合選擇符的索引可以看附錄A。

在代碼片段2.13中，為了更清晰看到效果，我給body添加了一個(gè)類panel-body，不過你會(huì)發(fā)現(xiàn)，在你自己的代碼里是不需要的。因?yàn)檫@個(gè)元素從根元素上繼承了字號(hào)大小，它已經(jīng)是你想要看到的那樣。

2.3.3 讓這個(gè)面板變得“響應(yīng)式”

我們再更深入地看看這個(gè)問題。你可以根據(jù)屏幕尺寸的變化，添加媒體查詢來改變基礎(chǔ)字號(hào)大小，這可以令面板在不同尺寸的屏幕下，有不同的大小變化。（見圖2.8）

[ 圖 2.8 在不同屏幕大小的響應(yīng)式面板：300px（左上角），800px（右上角），1440px（下面） ]

媒體查詢（media query） —— 通過@media規(guī)則來聲明樣式，在不同的屏幕尺寸或者媒體類型（如打印機(jī)或顯示器）下，觸發(fā)對應(yīng)的樣式控制。這是響應(yīng)式設(shè)計(jì)的關(guān)鍵要素。詳情看代碼片段2.15的這個(gè)例子，我在第8章會(huì)更深入的討論媒體查詢這個(gè)話題。

為了實(shí)現(xiàn)上面說的效果，把你的樣式代碼改成這樣。

[ 代碼片段 2.15 ]

:root {                            1
  font-size: 0.75em;               1
}                                  1

@media (min-width: 800px) {        2
  :root {                          2
    font-size: 0.875em;            2
  }                                2
}                                  2

@media (min-width: 1200px) {       3
  :root {                          3
    font-size: 1em;                3
  }                                3
}

1 針對所有屏幕，但是在更大的屏幕會(huì)被覆蓋

2 針對比800px更寬的屏幕，覆蓋默認(rèn)樣式代碼

3 針對比1200px更寬的屏幕，覆蓋以上兩套樣式代碼

第一套樣式規(guī)則，聲明了小屏幕中的默認(rèn)字號(hào)大小，這是我們想要在較小的屏幕上看到的字號(hào)大小。然后使用媒體查詢，把800px和1200px分別作為兩個(gè)分水嶺逐級(jí)增加字號(hào)的大小，覆蓋掉默認(rèn)的代碼。

針對頁面的根元素使用這些字號(hào)大小，響應(yīng)式地重新定義em和rem對應(yīng)的值，從而達(dá)到響應(yīng)改變整個(gè)頁面的效果。盡管你沒有直接對這個(gè)面板做任何的修改，它現(xiàn)在是響應(yīng)式的。在小屏幕上，譬如一臺(tái)手機(jī)，字號(hào)大小會(huì)被渲染成更小的（12px）。然后，在更大的屏幕上，寬大于800px和大于1200px的，組件的字號(hào)會(huì)分別放大到14px和16px。改變你的瀏覽器窗口，看看組件是怎么變化的吧。

如果你在整個(gè)頁面中像這樣嚴(yán)格使用相對單位，整個(gè)頁面會(huì)隨著視窗大小放大和縮小。這會(huì)是你的響應(yīng)式策略里很重要的一部分。上面的2套媒體查詢聲明代碼，可以幫助你節(jié)省在頁面的其他部分使用媒體查詢的額外代碼。不過，如果你在元素中聲明的字號(hào)大小是以像素為單位的，那就不會(huì)產(chǎn)生任何效果了。

類似地，如果你的老板或者客戶覺得現(xiàn)在網(wǎng)站的字號(hào)太小或者太大，你隨時(shí)可以做到通過修改一行代碼影響到全局的元素，這項(xiàng)改變會(huì)影響到頁面上的其他元素，不費(fèi)吹灰之力。

2.3.3 調(diào)整單個(gè)組件的大小

你也可以通過使用em縮放頁面上的一個(gè)獨(dú)立組件。有時(shí)，你可能會(huì)需要界面上的某些組件可以有個(gè)大號(hào)的版本。在我們的面板上這么做吧，首先你需要給面板添加一個(gè)類名large：

。

在圖2.9，我們看到了面板的普通版和大號(hào)版的比較。效果類似響應(yīng)式面板，但是兩種尺寸是可以同時(shí)在同一個(gè)頁面中使用的。

[ 圖 2.9 在一個(gè)頁面上的普通尺寸面板和大號(hào)面板 ]

我們來對面板的字號(hào)聲明方式做一些小的修改。你還是在使用相對單位，但需要調(diào)整它們的基準(zhǔn)值。第一點(diǎn)，給每個(gè)面板的父元素字號(hào)大小的定義font-size: 1rem。這里指的是，不管在什么地方使用這個(gè)面板，每個(gè)面板的字號(hào)大小是一個(gè)確定值。

第二點(diǎn)，使用em重新聲明標(biāo)題的字號(hào)大小，而不使用rem，這樣標(biāo)題就可以和剛才聲明的父元素字號(hào)1rem關(guān)聯(lián)起來。下面是對應(yīng)的代碼，更新下你的樣式表代碼吧。

[ 代碼片段 2.16 創(chuàng)建一個(gè)面板的大號(hào)版本 ]

.panel {
  font-size: 1rem;               1
  padding: 1em;
  border: 1px solid #999;
  border-radius: 0.5em;
}

.panel > h2 {
  margin-top: 0;
  font-size: 0.8em;              2
  font-weight: bold;
  text-transform: uppercase;
}

1 給組件聲明確定的字號(hào)大小

2 其他元素的字號(hào)大小用em和父元素字號(hào)關(guān)聯(lián)

這些修改看起來并沒有影響面板的樣式，但是現(xiàn)在你已經(jīng)準(zhǔn)備好了，做一個(gè)大號(hào)的面板只需要修改一小行代碼。你需要做的，就是把父元素字號(hào)大小改寫成1rem以外的一個(gè)值。因?yàn)槠渌氐挠?jì)算方式都依賴父元素的字號(hào)大小，只要修改它，整個(gè)面板的相關(guān)尺寸都會(huì)發(fā)生改變。添加下一個(gè)CSS代碼片段到你的樣式表，定義一個(gè)大號(hào)面板吧。

[ 代碼片段 2.17 利用一行代碼放大整個(gè)面板 ]

.panel.large {               1
  font-size: 1.2rem;
}

1 組合選擇器指向同時(shí)有panel類和large類的元素

現(xiàn)在，你可以給普通面板添加class="panel"和給大號(hào)面板添加class="panel large"。類似地，你也可以定義一個(gè)小號(hào)版本，只需要把父元素的字號(hào)設(shè)得比1rem小。如果這個(gè)面板是一個(gè)更復(fù)雜的組件，包含多種字號(hào)大小或padding，也只需要一個(gè)聲明就可以重置大小，只要所有的子元素都是使用em聲明的。

《別說你懂CSS相對單位》系列譯文：

如何更愉快地使用em

如何更愉快地使用rem [本文]

視口相關(guān)單位的應(yīng)用

無單位數(shù)字和行高

CSS自定義屬性

章節(jié)：

2.1 相對單位值的魔力

2.1.1 完美像素設(shè)計(jì)（pixel-perfect design）的掙扎

2.1.2 完美像素網(wǎng)頁的終結(jié)

像素（pixel）、點(diǎn)（point）和pc（pica）

2.2 em和rem

2.2.1 對font-size使用em

當(dāng)我們在一個(gè)元素內(nèi)用em同時(shí)聲明font-size和其他屬性

字號(hào)收縮問題

2.2.2 對font-size使用rem

可用性：對font-size使用相對長度單位

2.3 停止使用像素思維去思考

2.3.1 設(shè)置一個(gè)合理的字號(hào)默認(rèn)值

2.3.2 讓這個(gè)面板變得“響應(yīng)式”

2.3.3 調(diào)整單個(gè)組件的大小

2.4 視口相關(guān)單位（viewport-relative units）

CSS3

2.4.1 在font-size上使用vw

2.4.2 在font-size上使用calc()

2.5 不帶單位的數(shù)字（unitless number）和行高（line-height）

2.6 自定義屬性（也叫“CSS變量”）

2.6.1 動(dòng)態(tài)改變自定義屬性的值

2.6.2 通過JavaScript改變自定義屬性的值

2.6.3 初探自定義屬性

總結(jié)

原著版權(quán)信息：作者：Keith J.Grant  
書籍：CSS in Depth  
章節(jié)：Working with relative units

筆者 @Yuying Wu，前端愛好者 / 鼓勵(lì)師 / 新西蘭打工度假 / 鏟屎官。目前就職于某大型電商的B2B前端團(tuán)隊(duì)。

感謝你讀到這里，對上文若有任何疑問或建議，歡迎留言。

如果你和我一樣喜歡前端，喜歡搗騰獨(dú)立博客或者前沿技術(shù)，或者有什么職業(yè)疑問，歡迎關(guān)注我以及各種交流哈。

獨(dú)立博客：wuyuying.com
知乎ID：@Yuying Wu
Github：Yuying Wu

云服務(wù)器 GPU云服務(wù)器 rem單位應(yīng)用的是rem單位 css如何使用如何使用css

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116891.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Snailclimb

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#yyds干貨盤點(diǎn)# 數(shù)據(jù)庫E-R模型

閱讀 1647·2021-11-22 15:33
DMIT 中國香港大帶寬VPS補(bǔ)貨，$6.90/月，1核/750M內(nèi)存/10G ssd/2000G@

閱讀 1809·2021-11-15 18:01
基于uart的RS232和RS485總線

閱讀 741·2021-10-09 09:43
虛擬主機(jī)月流量是什么-虛擬主機(jī)月流量是指什么？

閱讀 2713·2021-09-22 16:03
單片機(jī)畢業(yè)設(shè)計(jì) - 選題推薦 (二)

閱讀 894·2021-09-03 10:28
Vultr新人系列教程 - 新注冊Vultr賬戶且用Vultr優(yōu)惠碼享受贈(zèng)送余額

閱讀 3659·2021-08-11 10:22
如何更愉快地使用rem —— 別說你懂CSS相對單位

閱讀 2804·2019-08-30 15:54
利用angular4和nodejs-express構(gòu)建一個(gè)簡單的網(wǎng)站（九）—用戶登錄

閱讀 1829·2019-08-30 14:21

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

如何更愉快地使用rem —— 別說你懂CSS相對單位

相關(guān)文章

**無單位數(shù)字和行高 —— 別說你懂CSS相對單位**

**視口相關(guān)單位的應(yīng)用 —— 別說你懂CSS相對單位**

**如何更愉快地使用em —— 別說你懂CSS相對單位**

CSS自定義屬性 —— 別說你懂CSS相對單位

不知道層疊，別說你懂CSS

發(fā)表評(píng)論

0條評(píng)論

Snailclimb

男|高級(jí)講師

TA的文章

#yyds干貨盤點(diǎn)# 數(shù)據(jù)庫E-R模型

DMIT 中國香港大帶寬VPS補(bǔ)貨，$6.90/月，1核/750M內(nèi)存/10G ssd/2000G@

基于uart的RS232和RS485總線

虛擬主機(jī)月流量是什么-虛擬主機(jī)月流量是指什么？

單片機(jī)畢業(yè)設(shè)計(jì) - 選題推薦 (二)

Vultr新人系列教程 - 新注冊Vultr賬戶且用Vultr優(yōu)惠碼享受贈(zèng)送余額