7777精品伊人久久久大香线蕉,99久久99精品久久久久久

精確測量是網(wǎng)頁設(shè)計中至關(guān)重要的一環(huán)。 CSS中至少存在十種不同的長度單位就足以說明這一點(diǎn)。每種單位都有其特定的用途，使網(wǎng)頁能夠更好地適應(yīng)各種設(shè)備。掌握這些單位後，您可以更精確地調(diào)整元素大小。本教程將探討CSS中可用的不同單位，並討論在哪些情況下使用哪些單位以及如何使用它們。

關(guān)鍵要點(diǎn)

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

絕對長度單位

絕對單位是實際物理測量值的數(shù)字表示。這些單位與屏幕大小或其分辨率無關(guān)。因此，絕對長度單位不太適合在數(shù)字設(shè)備上使用或在分辨率未知時使用。當(dāng)您為物理介質(zhì)（如打?。┰O(shè)計時，這些單位更合適。

絕對單位包括：

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

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

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

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

其他單位（如英寸、毫米和厘米）表示這些單位的物理大小。磅 (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 演示

相對長度單位

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

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

相對單位包括：

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

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

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

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

p {
  font-size: 2ex;
}

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

p {
  margin: 2ch;
}

em 單位

em 單位的值等於基元素或父元素的字體大小。例如，如果父元素的字體大小為 20px，則對於所有直接子元素，1em 的值將計算為 20px?？梢愿鶕?jù)基單位輕鬆增加或減少子元素的字體大小。數(shù)字不必是整數(shù)。

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

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

CodePen 演示

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

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

CodePen 演示

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

以下是此示例的 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 演示

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

視口相對長度單位

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

視口相對單位包括：

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

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

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

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

p {
  margin: 2ch;
}

CodePen 演示

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

vmin 單位與值較低的視口邊相關(guān)，因此它可以是高度或?qū)挾取?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 設(shè)置寬度和高度的 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 。值得記住的一點(diǎn)是，在 Internet Explorer 中，vmin 通過非標(biāo)準(zhǔn) vm 語法支持。對於 polyfill，您可以嘗試 vminpoly 或使用 -prefix-free 和插件。

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

結(jié)論

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

CSS長度單位常見問題解答

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

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

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

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

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

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

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

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

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

是的，您可以在單個項目中混合使用不同的CSS長度單位。但是，了解這些單位的工作方式以及它們?nèi)绾蜗嗷プ饔梅浅Ｖ匾?，以確保設(shè)計的一致性和響應(yīng)性。例如，您可以將“px”用於邊框?qū)挾?，“em”用於字體大小，“vw”用於佈局寬度，以創(chuàng)建能夠很好地跨不同屏幕大小縮放的設(shè)計。

使用CSS相對單位的優(yōu)點(diǎn)是什麼？

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

如何在不同的CSS長度單位之間進(jìn)行轉(zhuǎn)換？

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

CSS中的默認(rèn)字體大小是多少？

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

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

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