css-series-bkg.png

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

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

1. 如何更愉快地使用em [本文]
2. 如何更愉快地使用rem
3. 視口相關(guān)單位的應(yīng)用
4. 無單位數(shù)字和行高
5. CSS自定義屬性

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

• 2.1 相對(duì)單位值的魔力
  • 2.1.1 完美像素設(shè)計(jì)（pixel-perfect design）的掙扎
  • 2.1.2 完美像素網(wǎng)頁(yè)的終結(jié)
  • 像素（pixel）、點(diǎn)（point）和pc（pica）
• 2.2 em和rem
  • 2.2.1 對(duì)font-size使用em
    • 當(dāng)我們?cè)谝粋€(gè)元素內(nèi)用em同時(shí)聲明font-size和其他屬性
    • 字號(hào)收縮問題

CSS提供了很多種方式去定義一個(gè)值。大家最熟悉的可能也是最容易使用的就是像素（pixel），這被稱做“絕對(duì)單位”。也就是說，5px在不同的場(chǎng)景下是一樣的值。而其他的單位，如em和rem，不是絕對(duì)的而是相對(duì)的。相對(duì)單位的值會(huì)根據(jù)外部影響因素的變化而變化。例如，2em的值取決于你在哪個(gè)元素使用它（有時(shí)甚至是哪個(gè)屬性）。很自然，相對(duì)單位使用起來會(huì)比較困難。

開發(fā)人員，甚至有經(jīng)驗(yàn)的CSS開發(fā)人員，往往不喜歡跟相對(duì)單位打交道，其中包括臭名昭著的em。em的值可以被改變的方式似乎難以預(yù)測(cè)，沒有px那么清晰。在本章中，我將揭開相對(duì)單位的神秘面紗。首先，我會(huì)解釋它們?yōu)镃SS帶來的獨(dú)特價(jià)值，然后我會(huì)幫助你更好地理解它們。我會(huì)解釋它們的工作原理，也會(huì)告訴你怎么征服它們那看似不可預(yù)測(cè)的特性。你可以讓相對(duì)單位為你所用，正確地運(yùn)行，它們將讓你的代碼變得更加簡(jiǎn)單、靈活和容易使用。

2.1 相對(duì)單位值的魔力

CSS是通過遲邦定（late-binding）的方式把樣式渲染到web頁(yè)面上的：內(nèi)容和它的樣式會(huì)在各自的渲染完成之后再合并到一起。比起其他類型的圖形設(shè)計(jì)，這給設(shè)計(jì)過程添加了它們沒有的復(fù)雜程度，同時(shí)也賦予CSS更強(qiáng)大的能力 —— 一個(gè)樣式表可供成百上千個(gè)頁(yè)面使用。此外，用戶可以直接改變頁(yè)面的最終呈現(xiàn)方式。舉個(gè)例子，用戶可以更改默認(rèn)字號(hào)大小或者調(diào)整瀏覽器窗口的大小。

在早期的計(jì)算機(jī)應(yīng)用程序開發(fā)以及傳統(tǒng)出版行業(yè)中，開發(fā)人員或出版商清楚知道所在的媒介存在哪些限制。對(duì)于一個(gè)特定的應(yīng)用程序，窗口可能是400px寬，300px高，或者一個(gè)版面可能是4英寸寬，6?英寸高。因此，當(dāng)開發(fā)人員布局應(yīng)用程序的按鈕和文本時(shí)，他們很清楚這些元素可以做成什么尺寸，以及在屏幕上還有多少空間可以留給他們用來處理其他元素。然而在網(wǎng)頁(yè)上，情況卻不是這樣的。

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

在web環(huán)境下，用戶可以將瀏覽器窗口設(shè)置為任意大小，且CSS需要去適應(yīng)它。另外，用戶可以在一個(gè)頁(yè)面打開后，再調(diào)整它的大小，CSS也需要去適應(yīng)這些新的約束條件。這說明了在你創(chuàng)建頁(yè)面時(shí)樣式還沒有被調(diào)用，而是當(dāng)頁(yè)面在屏幕上渲染時(shí)，瀏覽器才會(huì)去計(jì)算樣式的規(guī)則。

這給CSS增加了一層抽象的概念。我們不應(yīng)該根據(jù)理想的情境來設(shè)計(jì)元素，而是應(yīng)該聲明一些樣式規(guī)則，可以讓該元素在任何場(chǎng)景下都能跑通。對(duì)于現(xiàn)在的互聯(lián)網(wǎng)，你的頁(yè)面可能要在一個(gè)4英寸的手機(jī)屏幕上展示，也可能在一個(gè)30英寸的大屏幕上。

長(zhǎng)久以來，設(shè)計(jì)師大量使用“完美像素”設(shè)計(jì)，緩解了這個(gè)問題帶來的復(fù)雜性。他們會(huì)創(chuàng)建一個(gè)有著嚴(yán)格定義的容器，通常是一個(gè)大約800px寬的居中的縱向列。然后在這些限制下他們?cè)龠M(jìn)行設(shè)計(jì)，這跟他們的前輩在原生應(yīng)用程序或印刷出版物中做的設(shè)計(jì)或多或少有點(diǎn)類似。

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

隨著技術(shù)的進(jìn)步和制造商推出更高分辨率的顯示器，像素完美的設(shè)計(jì)方式慢慢開始崩潰。在21世紀(jì)初期，把頁(yè)面設(shè)計(jì)成1024px寬還是800px寬，哪個(gè)是更保險(xiǎn)的展示策略？開發(fā)者針對(duì)這個(gè)問題討論得很多。然后，我們又針對(duì)能否改成1280px寬有類似的討論。是時(shí)候做個(gè)決定了。把我們網(wǎng)站的內(nèi)容寬度做得寬一點(diǎn)（相對(duì)于落伍的小電腦屏幕），還是做得窄一點(diǎn)（相對(duì)于新出的大屏幕），哪個(gè)選擇更好呢？

當(dāng)智能手機(jī)出現(xiàn)的時(shí)候，開發(fā)人員終于要（被迫）要停止假裝每個(gè)人都可以在他們的網(wǎng)站上獲得相同的體驗(yàn)了。不管我們喜不喜歡，我們都得放棄已知的多欄定寬（px）布局，并開始考慮響應(yīng)式設(shè)計(jì)。我們?cè)僖膊荒芴颖蹸SS所帶來的抽象概念（abstraction），相反，我們要去擁抱這項(xiàng)特性。

響應(yīng)式 —— 在CSS中，這指的針對(duì)不同大小的瀏覽器窗口，用不同的方式響應(yīng)更新頁(yè)面的樣式。我們要對(duì)不同尺寸的手機(jī)、平板電腦或桌面顯示器多花心思了。我們將在第8章中詳細(xì)介紹響應(yīng)式設(shè)計(jì)，但在本章中，我會(huì)先給大家介紹一些重要的基礎(chǔ)概念。

增加的抽象概念意味著額外的復(fù)雜性。如果我設(shè)定一個(gè)寬度為800px的元素，那么它在一個(gè)更小的窗口中會(huì)怎么顯示呢？如果一個(gè)橫向菜單不能全部在一行展示完，它又會(huì)怎么展示？在編寫CSS時(shí)，你需要能夠同時(shí)考慮具體情況以及普適性的問題。如果針對(duì)一個(gè)特定的問題，你有多種方式可以解決，那么你應(yīng)該選那個(gè)在多種不同場(chǎng)景下更通用的解決方案。

在抽象概念這個(gè)問題上，相對(duì)單位是CSS提供的工具之一。與其把字號(hào)大小設(shè)置為14px，你可以把它設(shè)置為與窗口大小成比例縮放?；蛘?，你可以設(shè)置頁(yè)面上所有元素是依賴基礎(chǔ)字號(hào)大小的變化而變化的，然后用一行代碼就可以達(dá)到調(diào)整整個(gè)頁(yè)面的目的。接下來，我們來看看CSS提供了哪些方式來實(shí)現(xiàn)以上的效果。

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

CSS支持一些絕對(duì)長(zhǎng)度單位，其中最常見也最基本的是像素（px）。較不常見的絕對(duì)單位有毫米（mm，millimeter）、厘米（cm，centimeter）、英寸（in.，inch）、點(diǎn)（pt，point，印刷術(shù)語(yǔ)，長(zhǎng)度為1/72 inch）以及pc（pica，印刷術(shù)語(yǔ)，長(zhǎng)度為12 points）。如果你想了解其中的計(jì)算方式，以上的長(zhǎng)度單位都可以直接轉(zhuǎn)換成另一個(gè)單位：1 inch = 25.4 mm = 2.54 cm = 6 pc = 72 pt = 96 px。因此，16px與12pt（16/96×72）是等價(jià)的。設(shè)計(jì)師通常更熟悉點(diǎn)（point）的使用，而開發(fā)人員更習(xí)慣于像素，因此在和設(shè)計(jì)師溝通時(shí)，你可能需要在兩者之間做一些計(jì)算工作。
?
像素這個(gè)名字有點(diǎn)誤導(dǎo)性 —— 1 CSS像素并不嚴(yán)格等同于顯示器的1像素，在高分辨率顯示器（如“Retina顯示屏”）上尤其明顯。盡管根據(jù)瀏覽器、操作系統(tǒng)和硬件的不同，CSS的測(cè)量值可能會(huì)有細(xì)微的差別，但96px總是會(huì)大致等于屏幕上的物理1英寸。（盡管有可能會(huì)因某些設(shè)備或用戶設(shè)置而異。）

2.2 em和rem

em是最常見的相對(duì)長(zhǎng)度單位，這是排版中使用的一種度量方式，基準(zhǔn)值是當(dāng)前元素的字號(hào)大小。 在CSS中，1em表示當(dāng)前元素的字號(hào)大小，實(shí)際值取決于在哪個(gè)元素上應(yīng)用。圖2.1展示了一個(gè)padding為1em的div。

[ 圖 2.1：padding為1em的元素（添加虛線是為了讓padding更明顯）]

"圖 2.1"

模板代碼片段如下。這套樣式規(guī)則定義字號(hào)為16px，也就是元素本身1em代表的值，然后再使用em來聲明元素的padding。 把這段代碼添加到一個(gè)新的樣式表里，在<div class ="padded">下隨手寫些文字，然后到瀏覽器看看效果吧。

代碼片段 2.1：在padding上使用em

.padded {
  font-size: 16px;
  padding: 1em;          1
}

• 1 把各個(gè)方向的padding的值設(shè)置為字號(hào)大小

把padding賦值為1em，乘以字號(hào)，得到一個(gè)值為16px的padding渲染值。重點(diǎn)來了，使用相對(duì)單位聲明的值會(huì)由瀏覽器轉(zhuǎn)化為一個(gè)絕對(duì)值，我們稱之為計(jì)算值。

在這個(gè)例子里，將padding改為2em會(huì)生成一個(gè)32px的計(jì)算值。如果同一個(gè)元素的另一個(gè)選擇器，用一個(gè)不一樣的字號(hào)值去覆蓋它，這會(huì)改變em在這個(gè)域下的基準(zhǔn)值，那么padding的計(jì)算值也會(huì)相應(yīng)變化。

在設(shè)置padding、height、width或border-radius等屬性時(shí)，使用em可能會(huì)很方便，因?yàn)槿绻鼈兝^承了不同的字號(hào)大小，或者用戶更改了字體設(shè)置，這些屬性會(huì)均勻地縮放。

圖2.2展示了兩個(gè)不同大小的盒子。盒子內(nèi)的font-size、padding和border-radius各不相同。

[ 圖 2.2：有相對(duì)大小的padding和border-radius的元素 ]

"圖 2.2"

你可以通過用em聲明padding和border-radius來給這些盒子聲明樣式規(guī)則。首先給每個(gè)元素設(shè)定padding和border-radius為1em，然后給每個(gè)盒子指定不同的字號(hào)，那么其他屬性會(huì)跟著字號(hào)縮放。

在你的HTML代碼里，創(chuàng)建如下的兩個(gè)盒子，類名分別是box-small和box-large，代表兩個(gè)字號(hào)修飾符。

[ 代碼片段 2.2：在不同元素上使用em（HTML）]

<span class="box box-small">Small</span>
<span class="box box-large">Large</span>

現(xiàn)在，添加下面的樣式到你的樣式表。這里使用了em聲明了一個(gè)盒子。還定義了小字號(hào)和大字號(hào)的修飾符，指定不同的字號(hào)大小。

[ 代碼片段 2.3：在不同元素上使用em（CSS）]

.box {
  padding: 1em;
  border-radius: 1em;
  background-color: lightgray;
}

.box-small {
  font-size: 12px;              1
}

.box-large {
  font-size: 18px;              1
}

• 1 不同的字號(hào)大小，這會(huì)改變?cè)氐膃m實(shí)際值的大小。

這是em一個(gè)強(qiáng)大的功能。你可以定義一個(gè)元素的字號(hào)大小，然后使用一句簡(jiǎn)單的聲明，就可以通過改變字號(hào)大小從而控制整個(gè)元素大小縮放。你后面將會(huì)創(chuàng)建另外一個(gè)這樣的例子，不過首先，我們來討論一下em和字號(hào)大小。

2.2.1 對(duì)font-size使用em

當(dāng)font-size使用em作為單位時(shí)，它的表現(xiàn)會(huì)有點(diǎn)不一樣。我之前說過，em是以當(dāng)前元素的字號(hào)大小作為基準(zhǔn)值的。但是，如果你把一個(gè)元素的字號(hào)設(shè)為1.2em的時(shí)候，這是什么意思呢？一個(gè)元素的字號(hào)大小是不能等于它自己的1.2倍的。相反，在font-size上的em會(huì)先從繼承到的字號(hào)大小衍生出來。

舉個(gè)簡(jiǎn)單的例子，見圖2.3。以下展示了一些不同字號(hào)大小的文字。在代碼片段2.4，你會(huì)用到em來實(shí)現(xiàn)。

[ 圖 2.3 以em為單位的兩種不同的字號(hào)大小 ]

"圖 2.3"

在你的頁(yè)面添加以下代碼片段。第一行文字，在<body>標(biāo)簽里面，它會(huì)按body的字號(hào)大小渲染。第二部分，口號(hào)（slogan），繼承父元素的字號(hào)大小。

[ 代碼片段 2.4 相對(duì)font-size的模板 ]

<body>
  We love coffee
  <p class="slogan">We love coffee</p>          1
</body>

• 1 slogan從<body>繼承了字號(hào)大小。

代碼片段中，CSS代碼片段聲明了body的字號(hào)大小。為了更加清晰，在這里我用了px來聲明。下一步，你可以用em來放大slogan的字號(hào)大小。

[ 代碼片段 2.5：在font-size上使用em ]

body {
  font-size: 16px;
}

.slogan {                  1
  font-size: 1.2em;        1
}                          1

• 1 計(jì)算：這個(gè)元素繼承到字號(hào)，乘以1.2

slogan聲明的字號(hào)大小是1.2em，為了計(jì)算轉(zhuǎn)換成像素值，你需要引用繼承的字號(hào)16px，16 * 1.2 = 19.2，所以計(jì)算字號(hào)值是19.2px。

提示

如果你已經(jīng)知道以px為單位的基礎(chǔ)字號(hào)大小，但希望把它改用em聲明，下面有個(gè)簡(jiǎn)單的計(jì)算公式：目標(biāo)em值 = 目標(biāo)像素值 / 父元素（被繼承元素）像素值。舉個(gè)例子，如果你想要一個(gè)10px的字號(hào)大小，父元素的字號(hào)是12px，10 / 12 = 0.8333em。如果你想要16px的字號(hào)大小，父元素字號(hào)是12px，那么 16 / 12 = 1.3333em。我們會(huì)在這章里多次用到這個(gè)計(jì)算公式。

有一點(diǎn)對(duì)你很有幫助，對(duì)于大多數(shù)瀏覽器，默認(rèn)字號(hào)大小是16px。技術(shù)上，關(guān)鍵字medium會(huì)被計(jì)算轉(zhuǎn)換為16px。

當(dāng)我們?cè)谝粋€(gè)元素內(nèi)用em同時(shí)聲明font-size和其他屬性

你已經(jīng)使用過em聲明font-size了（基于一個(gè)繼承的字號(hào)大小值）。以及，你也曾經(jīng)使用em聲明其他屬性，如padding和border-radius（基于當(dāng)前元素的字號(hào)大小值）。當(dāng)你針對(duì)同一個(gè)元素使用em聲明font-size和其他屬性的時(shí)候，em會(huì)變得很神奇。此時(shí)瀏覽器必須先計(jì)算font-size，然后基于這個(gè)值再去計(jì)算其他值。這些屬性聲明的時(shí)候使用的是相同的em值，但很可能它們會(huì)有不同的計(jì)算值。

在之前的例子里，我們計(jì)算到字號(hào)大小是19.2px（繼承的16px乘以1.2em）。圖2.4是相同的slogan元素，但有額外的1.2em padding以及為了讓padding大小更加明顯的灰色背景?？梢钥闯?，padding比font-size稍微大一些，盡管它倆聲明的時(shí)候em值是一樣的。

[ 圖2.4 一個(gè)font-size為1.2em以及padding為1.2em的元素 ]

"圖 2.4"

現(xiàn)在的情況是，這個(gè)段落從body繼承了16px的字號(hào)大小，通過計(jì)算得到值為19.2px的字號(hào)計(jì)算值。這意味著，19.2px是1em在當(dāng)前域的基礎(chǔ)值，而這個(gè)值會(huì)被用作計(jì)算padding的值。對(duì)應(yīng)的CSS代碼在下面，更新你的樣式表并查看你的測(cè)試頁(yè)面吧。

[ 代碼片段 2.6 在font-size和padding上使用em ]

body {
  font-size: 16px;
}

.slogan {
  font-size: 1.2em;             1
  padding: 1.2em;               2
  background-color: #ccc;
}

• 1 賦值為 19.2 px
• 2 賦值為 23.04 px

在這個(gè)例子里，padding的聲明值為1.2em，乘以19.2px（當(dāng)前元素的字號(hào)大?。?，計(jì)算出23.04px。我們可以看到，盡管font-size和padding聲明時(shí)em值是一樣的，但它們的計(jì)算值是不一樣的。

字號(hào)收縮問題

當(dāng)你使用em聲明多層嵌套的元素字號(hào)時(shí)，會(huì)產(chǎn)生意想不到的效果。要弄清楚每個(gè)元素的實(shí)際值，首先你需要知道它繼承的父元素的字號(hào)大小，如果父元素的字號(hào)也是用em聲明的，那么你需要知道它的父元素的字號(hào)大小，在dom樹往上查，以此類推。

當(dāng)你使用em聲明列表的字號(hào)大小，列表嵌套了好幾層，效果就更明顯了。大多數(shù)web開發(fā)者會(huì)發(fā)現(xiàn)在他們的職業(yè)生涯里面，圖2.5的列表嵌套形式有點(diǎn)眼熟。文字在逐步縮小！正是因?yàn)閑m帶來的這一類煩人的問題，開發(fā)者才對(duì)em避而遠(yuǎn)之。

[ 圖 2.5 嵌套列表中的字號(hào)縮小現(xiàn)象 ]

"圖 2.5"

當(dāng)你多層嵌套列表，而每一層聲明的字號(hào)大小以em為單位，字號(hào)收縮現(xiàn)象就會(huì)發(fā)生。在代碼片段2.7和2.8的例子里，無序列表的字號(hào)是0.8em。這個(gè)選擇器對(duì)頁(yè)面上所有的ul有效，所以當(dāng)一個(gè)列表從另外一個(gè)列表繼承到字號(hào)大小的時(shí)候，em就產(chǎn)生復(fù)合效果。

[ 代碼片段 2.7 在列表上使用em ]

body {
  font-size: 16px;
}

ul {
  font-size: .8em;
}

[ 代碼片段 2.8 多層嵌套的列表 ]

<ul>
  <li>Top level
    <ul>                                    1
      <li>Second level                      1
        <ul>                                2
          <li>Third level                   2
            <ul>                            3
              <li>Fourth level              3
                <ul>
                  <li>Fifth level</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

• 1 這個(gè)列表嵌套在第一個(gè)列表里，繼承了它的字號(hào)大小
• 2 然后這個(gè)列表又嵌套在另一個(gè)列表里，繼承了第二個(gè)列表的字號(hào)大小
• 3 ……以此類推

每一個(gè)列表的字號(hào)大小是0.8乘以父元素的字號(hào)大小。這代表第一個(gè)列表的字號(hào)大小是12.8px，嵌套的子列表字號(hào)大小是10.24px（12.8px * 0.8），第三層列表的是8.192px，如此類推。同樣地，如果你給字號(hào)大小的賦值大于1em，相反，文字的字號(hào)會(huì)一層層變大。我們想要的效果是像圖2.6一樣，在頂層聲明字號(hào)的大小，但下面嵌套層級(jí)的列表字號(hào)保持不變。

[ 圖 2.6 字號(hào)正常的多層嵌套列表 ]

"圖 2.6"

其中一種實(shí)現(xiàn)的方式可以看看代碼片段2.9。第一個(gè)列表的字號(hào)大小還是0.8 em（見示例2.7），第二個(gè)選擇器對(duì)嵌套在無序列表的無序列表有效 —— 也就是除了第一個(gè)無序列表以外的所有無序列表?，F(xiàn)在嵌套的列表設(shè)定了跟父元素一致的字號(hào)大小，正如圖2.6一樣。

[ 代碼片段 2.9 字號(hào)收縮現(xiàn)象的糾正 ]

ul {
  font-size: .8em;
}

ul ul {                1
  font-size: 1em;      1
}  

• 1 嵌套在列表里面的列表，應(yīng)該把字號(hào)大小設(shè)定為跟父元素一樣

這可以解決問題，但不是最優(yōu)方案。因?yàn)槟阍O(shè)置了一個(gè)字號(hào)值，馬上用另一個(gè)選擇器重寫了這個(gè)規(guī)則。如果你可以使用針對(duì)嵌套的列表聲明一個(gè)特定的選擇器，避免互相覆蓋，會(huì)是一個(gè)更好的方案。

到現(xiàn)在我們清楚了，如果你不是一個(gè)比較小心的人，你應(yīng)該遠(yuǎn)離em。使用em作為padding、margin和元素縮放效果的單位挺好的，但當(dāng)em遇上font-size時(shí)，事情可以變得很復(fù)雜。感謝上天，我們有個(gè)更好的選擇 —— rem。

（未完待續(xù)，請(qǐng)期待下一篇《如何更愉快地使用rem》）

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

1. 如何更愉快地使用em [本文]
2. 如何更愉快地使用rem
3. 視口相關(guān)單位的應(yīng)用
4. 無單位數(shù)字和行高
5. CSS自定義屬性

章節(jié)：

• 2.1 相對(duì)單位值的魔力
  • 2.1.1 完美像素設(shè)計(jì)（pixel-perfect design）的掙扎
  • 2.1.2 完美像素網(wǎng)頁(yè)的終結(jié)
  • 像素（pixel）、點(diǎn)（point）和pc（pica）
• 2.2 em和rem
  • 2.2.1 對(duì)font-size使用em
    • 當(dāng)我們?cè)谝粋€(gè)元素內(nèi)用em同時(shí)聲明font-size和其他屬性
    • 字號(hào)收縮問題
  • 2.2.2 對(duì)font-size使用rem
    • 可用性：對(duì)font-size使用相對(duì)長(zhǎng)度單位
• 2.3 停止使用像素思維去思考
  • 2.3.1 設(shè)置一個(gè)合理的字號(hào)默認(rèn)值
  • 2.3.3 讓這個(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ì)。

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

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

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