а√最新版在线天堂鲁大师,av片在线播放

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

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

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

絕對(duì)長(zhǎng)度單位

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

絕對(duì)單位包括：

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

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

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

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

其他單位（如英寸、毫米和厘米）表示這些單位的物理大小。磅 (pt) 單位表示 1/72 英寸，派卡 (pc) 單位表示 1/6 英寸。以下是一些使用六種常用絕對(duì)單位的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 演示

相對(duì)長(zhǎng)度單位

顧名思義，相對(duì)單位沒(méi)有固定值。它們的值相對(duì)於其他一些預(yù)定義的值或特性。相對(duì)單位使輕鬆正確地調(diào)整元素大小變得容易，因?yàn)槲覀兛梢詫⑺鼈兊膶挾取⒏叨?、字體大小等與其他一些基準(zhǔn)參數(shù)相關(guān)聯(lián)。

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

相對(duì)單位包括：

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

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

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

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

p {
  font-size: 2ex;
}

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

p {
  margin: 2ch;
}

em 單位

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

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

下面的演示展示了 em 單位的工作原理的一個(gè)簡(jiǎn)單示例：

CodePen 演示

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

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

CodePen 演示

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

以下是此示例的 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，但由於它們是嵌套的，因此它們的實(shí)際字體大小不同。

rem 單位

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

p {
  font-size: 2ex;
}

這是一個(gè)簡(jiǎn)單的演示，與之前的演示具有相同的嵌套，但這次使用 rem：

CodePen 演示

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

視口相對(duì)長(zhǎng)度單位

視口相對(duì)長(zhǎng)度基於視窗或視口的高度和寬度。視窗或視口是屏幕上可見(jiàn)的區(qū)域或框架空間。

視口相對(duì)單位包括：

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)。因此，可以類(lèi)似地推導(dǎo)出 1vw 的值。這意味著 1vw 等於視口寬度的 1/100。例如，如果窗口的寬度為 1200px，則 1vw 為 12px。使用視口單位設(shè)置元素的寬度、高度和填充的 CSS 為：

p {
  margin: 2ch;
}

CodePen 演示

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

vmin 單位與值較低的視口邊相關(guān)，因此它可以是高度或?qū)挾取?1vmin 的值等於長(zhǎng)度最短邊的 1/100。例如，如果視口的尺寸為 500 x 700，則 1vmin 的值等於 5px。如果尺寸為 1000 x 700，則值為 7px。

相反，vmax 會(huì)考慮視口的最大值。比例因子仍然是 1/100，因此 1vmax 等於值較高的邊的 1/100。採(cǎi)用與上述相同的示例，如果視口的尺寸為 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 。如果您需要更多支持，這裡有一個(gè) polyfill。

vw、vh 和 vmin Chrome 20 、IE 9 、Firefox 19 、Safari 6 和 Opera 20 。值得記住的一點(diǎn)是，在 Internet Explorer 中，vmin 通過(guò)非標(biāo)準(zhǔn) vm 語(yǔ)法支持。對(duì)於 polyfill，您可以嘗試 vminpoly 或使用 -prefix-free 和插件。

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

結(jié)論

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

CSS長(zhǎng)度單位常見(jiàn)問(wèn)題解答

CSS長(zhǎng)度單位有哪些不同類(lèi)型？

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

如何為我的項(xiàng)目選擇合適的CSS長(zhǎng)度單位？

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

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

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

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

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

我可以在單個(gè)項(xiàng)目中混合使用不同的CSS長(zhǎng)度單位嗎？

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

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

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

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

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

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

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

像素密度如何影響CSS長(zhǎng)度單位？

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