查看CSS中的長度單位-css教學-PHP中文網

CSS 提供多種長度單位，每種單位都有其特定用途，使網頁能夠更好地適應不同的設備。這些單位大致可分為絕對長度單位、相對長度單位和視口相對長度單位。
絕對長度單位（如像素、英寸、毫米和厘米）表示物理測量值，不受屏幕大小或分辨率的影響。但是，它們可能不適用於數字設備或分辨率未知的情況。
相對長度單位（包括em、rem和視口單位）根據其他預定義的值或特性調整其值，非常適合創建響應式佈局。它們可以相對於使用的字體，也可以相對於屏幕的視窗高度和寬度。
視口相對長度基於視窗或視口的高度和寬度。這些單位（包括vh（視口高度）、vw（視口寬度）、vmin（視口最小值）和vmax（視口最大值））可用於根據瀏覽器窗口的尺寸縮放元素。

絕對長度單位

絕對單位是實際物理測量值的數字表示。這些單位與屏幕大小或其分辨率無關。因此，絕對長度單位不太適合在數字設備上使用或在分辨率未知時使用。當您為物理介質（如打印）設計時，這些單位更合適。

絕對單位包括：

cm（厘米）
mm（毫米）
in（英寸）
pc（派卡）
pt（磅）
px（像素）

請注意，規範的編輯草案還包括四分之一毫米 (q) 單位，但這是一種新單位，似乎沒有任何瀏覽器支持。

您可能會注意到，在使用絕對長度時，同一單位的相同值在不同屏幕上的顯示效果會有差異。這是因為屏幕的DPI（每英寸點數）不同。與低分辨率屏幕相比，高分辨率屏幕具有更高的DPI，因此圖像或文本看起來更小。

所有絕對單位中最廣泛使用的是像素 (px)。像素通常被理解為屏幕上的單個點，儘管從技術上講它比這更複雜。它是最小的測量單位，通常用作其他單位的基準。

其他單位（如英寸、毫米和厘米）表示這些單位的物理大小。磅 (pt) 單位表示 1/72 英寸，派卡 (pc) 單位表示 1/6 英寸。以下是一些使用六種常用絕對單位的CSS代碼：

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

登入後複製

CodePen 演示

相對長度單位

顧名思義，相對單位沒有固定值。它們的值相對於其他一些預定義的值或特性。相對單位使輕鬆正確地調整元素大小變得容易，因為我們可以將它們的寬度、高度、字體大小等與其他一些基準參數相關聯。

創建響應式佈局時，通常建議使用這些單位，並且更適合數字媒體。它們的值可以相對於您使用的字體，也可以相對於屏幕的視窗高度和寬度。

相對單位包括：

ex（x 高度）
ch（字符）
em（以打印 em 命名，但並不相同）
rem（根 em）

讓我們更詳細地了解一下這些單位。

x 高度 (ex) 和字符 (ch) 單位

ex 單位很少在開發中使用。 1ex 等於所用字體中小寫“x”的大小。在大多數情況下，1ex 的值幾乎等於 0.5em。但是，這會因字體而異。此單位可以被認為是 em 的垂直等效單位。

p {
  font-size: 2ex;
}

登入後複製

字符 (ch) 單位與“0”字符相關。 1ch 是字體中“0”字符的推進量度。

p {
  margin: 2ch;
}

登入後複製

em 單位

em 單位的值等於基元素或父元素的字體大小。例如，如果父元素的字體大小為 20px，則對於所有直接子元素，1em 的值將計算為 20px。可以根據基單位輕鬆增加或減少子元素的字體大小。數字不必是整數。

使用 em 使我們能夠輕鬆地將各種元素的字體大小保持在固定的比例。例如，如果父元素的 font-size 值為 50px，則將子元素的字體大小設置為 2em 將與將其設置為 100px 相同。類似地，將其設置為 0.5em 將使子元素的字體大小為 25px。

下面的演示展示了 em 單位的工作原理的一個簡單示例：

CodePen 演示

但是，有時 em 單位會在嵌套元素的情況下產生不希望的結果。這是因為 em 值採用直接父標記的值，因此每個嵌套子元素都將具有相同的 em 值，但計算值不同，因為計算值始終相對於其直接父元素。因此，如果我們需要將當前元素的值設置為相對於非直接父元素或非根父元素的父元素的比例，則會使它變得困難。

以下是一個演示，展示 em 單位的異常嵌套效果。對於此示例，我們假設文檔中的基準字體大小為 16px（這通常是默認值）：

CodePen 演示

請注意 HTML 中的嵌套元素，每個元素的內容都聲明了計算出的字體大小。

以下是此示例的 CSS：

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

登入後複製

您可以看到，即使所有 div 元素都定義為 1.15em，但由於它們是嵌套的，因此它們的實際字體大小不同。

rem 單位

這就是 rem 單位派上用場的地方。 rem 的值始終等於根元素（在 HTML 文檔中為 html 元素）的字體大小。 rem 演示類似於 em 單位的演示。以下是 CSS：

p {
  font-size: 2ex;
}

登入後複製

這是一個簡單的演示，與之前的演示具有相同的嵌套，但這次使用 rem：

CodePen 演示

請注意，現在嵌套仍然存在，但不影響嵌套元素的計算字體大小。

視口相對長度單位

視口相對長度基於視窗或視口的高度和寬度。視窗或視口是屏幕上可見的區域或框架空間。

視口相對單位包括：

vh（視口高度）
vw（視口寬度）
vmin（視口最小值）
vmax（視口最大值）

視口高度 (vh) 和視口寬度 (vw)

vh 單位與視口的高度相關。 vh 的值等於視口高度的 1/100。如果我們想根據瀏覽器窗口的高度縮放元素，則此單位很有用。例如，如果視口的高度為 400px，則 1vh 等於 4px。如果視口高度為 800px，則 1vh 等於 8px。

就像 vh 與窗口的高度相關一樣，vw 單位與視口的高度相關。因此，可以類似地推導出 1vw 的值。這意味著 1vw 等於視口寬度的 1/100。例如，如果窗口的寬度為 1200px，則 1vw 為 12px。使用視口單位設置元素的寬度、高度和填充的 CSS 為：

p {
  margin: 2ch;
}

登入後複製

CodePen 演示

視口最小值 (vmin) 和視口最大值 (vmax) 單位

vmin 單位與值較低的視口邊相關，因此它可以是高度或寬度。 1vmin 的值等於長度最短邊的 1/100。例如，如果視口的尺寸為 500 x 700，則 1vmin 的值等於 5px。如果尺寸為 1000 x 700，則值為 7px。

相反，vmax 會考慮視口的最大值。比例因子仍然是 1/100，因此 1vmax 等於值較高的邊的 1/100。採用與上述相同的示例，如果視口的尺寸為 500 x 700，則 1vmax 的值等於 7px。如果尺寸為 1000 x 700，則值為 10px。這是使用 vmin 和 vmax 設置寬度和高度的 CSS：

div {
  font-size: 1.15em;
}

span {
  font-size: 2em;
}

登入後複製

CodePen 演示

瀏覽器支持

em、ex、px、cm、mm、in、pt 和 pc 所有瀏覽器都支持，包括舊版 IE。

ch Firefox、Chrome 27 、IE 9 、Safari 7 和 Opera 20 。

rem 所有正在使用的瀏覽器都支持，包括 IE9 。如果您需要更多支持，這裡有一個 polyfill。

vw、vh 和 vmin Chrome 20 、IE 9 、Firefox 19 、Safari 6 和 Opera 20 。值得記住的一點是，在 Internet Explorer 中，vmin 通過非標準 vm 語法支持。對於 polyfill，您可以嘗試 vminpoly 或使用 -prefix-free 和插件。

vmax Chrome 20 、Firefox 19 和 Opera 20 ，以及 Safari 6.1 。 IE 不支持。您可以嘗試此 polyfill 以獲得一些 hacky 支持，並幫助解決不同移動瀏覽器中的一些錯誤。

結論

本教程簡要介紹了 CSS 中可用的不同長度單位，包括許多有助於響應式佈局和跨設備測量的單位。您是否在任何項目中使用過 rem 或視口單位？您的體驗如何？請在評論部分分享使用這些單位的任何技巧或遇到的任何問題。

CSS長度單位常見問題解答

CSS長度單位有哪些不同類型？

CSS長度單位用於指定網頁上各種元素的大小。 CSS中有兩種類型的長度單位：絕對單位和相對單位。絕對單位是固定的，並且不會根據頁面的任何其他屬性更改其大小。它們包括像素 (px)、磅 (pt)、派卡 (pc)、英寸 (in)、厘米 (cm) 和毫米 (mm)。另一方面，相對單位相對於另一個長度值。它們包括 em、ex、ch、rem、vw、vh、vmin、vmax 和百分比 (%)。

如何為我的項目選擇合適的CSS長度單位？

CSS長度單位的選擇取決於項目的具體要求。如果您需要一個固定大小，無論屏幕大小或字體大小如何都不會改變，則應使用絕對單位。但是，如果您希望您的設計具有響應性並適應不同的屏幕大小或字體大小，則應使用相對單位。

CSS中的“em”和“rem”單位有什麼區別？

“em”和“rem”都是CSS中的相對單位。 “em”單位相對於其最近的父元素的字體大小。另一方面，“rem”代表“root em”，相對於根元素 (html)，而不是父元素。這意味著“rem”將始終保持一致，無論嵌套級別如何，這使得更容易控制CSS中的整體大小。

CSS中的“vw”和“vh”單位是如何工作的？

CSS中的“vw”（視口寬度）和“vh”（視口高度）單位是相對單位，分別表示視口寬度和高度的百分比。 “vw”的一個單位等於視口寬度的1%，“vh”的一個單位等於視口高度的1%。這些單位對於創建適應視口大小的響應式設計特別有用。

我可以在單個項目中混合使用不同的CSS長度單位嗎？

是的，您可以在單個項目中混合使用不同的CSS長度單位。但是，了解這些單位的工作方式以及它們如何相互作用非常重要，以確保設計的一致性和響應性。例如，您可以將“px”用於邊框寬度，“em”用於字體大小，“vw”用於佈局寬度，以創建能夠很好地跨不同屏幕大小縮放的設計。

使用CSS相對單位的優點是什麼？

CSS中的相對單位提供了一些優點，尤其是在響應式設計中。它們允許元素的大小相對於彼此、視口大小或用戶的默認字體大小進行縮放。這使得您的設計更靈活，並且能夠適應不同的屏幕大小和用戶偏好。

如何在不同的CSS長度單位之間進行轉換？

在不同的CSS長度單位之間進行轉換可能很複雜，因為它取決於各種因素，例如當前字體大小、視口大小和屏幕的像素密度。但是，有一些在線工具和計算器可以幫助您進行這些轉換。

CSS中的默認字體大小是多少？

大多數瀏覽器中的默認字體大小為16px。這意味著1em或1rem默認等於16px。但是，用戶可以在其瀏覽器設置中更改此默認字體大小，這就是為什麼通常建議使用相對單位作為字體大小的原因。

像素密度如何影響CSS長度單位？

像素密度是指給定屏幕物理區域中的像素數，通常以每英寸像素 (PPI) 為單位進行測量。像素密度較高的屏幕在相同的物理空間中顯示更多細節。在CSS中，像素 (px) 不是屏幕上的物理像素，而是一個參考像素，它是一個物理測量單位，它考慮了屏幕的像素密度。這意味著CSS中的1px長度可能對應於高密度屏幕上的多個物理像素。