小編精選 - 技術文章翻譯 · 04月22日

CSS 中的單位（em、rem、pt、px、vw、vh、vmin、vmax、ex、ch、...）

CSS 知道幾種測量單位。最著名的單位是像素，但還有其他單位雖然不那麼流行，但在某些用例中非常方便。

本文涵蓋相對單位、絕對單位和視口單位。

媒體	建議	偶爾使用	不經常使用	不建議
畫面	em、rem、%	px	ch、ex、vw、vh、vmin、vmax	cm、mm、in、pt、pc
印出	em、rem、%	cm、mm、in、pt、pc	ch、ex	px、vw、vh、vmin、vmax

相對單位

與像素、點或公分等絕對單位相反，您也可以使用百分比、em 或 rem 等相對單位來定義尺寸。

在大多數瀏覽器中，預設字體大小為16px ，您可以使用該值作為計算的基礎（例如 16px 等於 1em、1rem 或 100%）。

單位	描述
%	百分比
em	元素的字體大小（例如2.5em表示字體比普通字體大2.5倍）
rem	文件根元素的字型大小
ch	「0」字元的寬度，在等寬字體中，所有字元具有相同的寬度，1ch 等於 1 個字元
ex	x-目前字體的高度，以小寫x\|的高度測量

https://codepen.io/fullstack-to/pen/PrXNGW

差別就在於傳承。 rem值基於根元素 ( html )。每個子元素都使用html字體大小作為計算基礎。

另一方面， em是基於父元素的字體大小。

rem讓字體大小的計算變得更容易。對於嵌套元素甚至多個嵌套元素（例如列表），不再需要根據父元素的字體大小來計算字體大小。 rem總是計算與html標籤相關的字體大小。

不同字體系列的 x 高度

所有字體都具有相同的大小 (18pt)，但紅色條表示字體的 x 高度 ( ex ) 不同。

“0”字元的寬度

字體再次具有相同的大小（18pt）。在此圖中，比較了字元寬度 ( ch )。 Mono space 字體的每個字元具有相同的寬度，而 serif 或 sans-serif 字體的每個字元可能具有不同的寬度（ i比o窄）。

絕對單位的大小是固定的，你不能討論公分有多長。如果需要精確長度，則應使用絕對單位（例如不應調整大小的元件）。如果您想要定義限制以避免區域變得太寬或太窄，它們也很有用。絕對單位不會根據螢幕尺寸、方向或其他變化而改變。

https://codepen.io/fullstack_to/pen/mZaVBZ

視口單位表示目前瀏覽器視窗的百分比。

與百分比單位的差異在於，視口單位始終以瀏覽器視窗大小的百分比計算。而百分比單位繼承其父元素的大小。

https://codepen.io/fullstack-to/pen/gNZryX

當瀏覽器視窗大小調整或手機方向改變時， vmin和vmax可能會改變。

vmin是視口高度或寬度之間的最小值（以百分比表示），取決於哪個較小。

vmax是視口高度或寬度之間的最大值（以百分比表示），取決於哪一個較大。

如果您喜歡我的內容，您可能想在 Twitter 上關注我？ @fullstack_to

封面圖片由William Warby在Unsplash上提供

原文出處：https://dev.to/matthias/units-in-css-em-rem-pt-px-vw-vh-vmin-vmax-ex-ch-53l0

0個讚 0留言 89瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

精選技術文章翻譯，幫助開發者持續吸收新知。