過(guò)去CSS 有 4 個(gè)你必須知道的識(shí)別視窗口的單位，并且它們能夠很好地處理每個(gè)可以想象的用例。然而，隨著時(shí)間的推移和時(shí)代的變化，這 4 種視口單位現(xiàn)在不足以解決所有用例。于是，CSS 提供了 20 個(gè)更大的視窗口單位，以適應(yīng)時(shí)代技術(shù)的發(fā)展需要，因此，總共為24個(gè)視窗單位，看起來(lái)感覺(jué)很多，但是，它們可能被分解為 6 個(gè)主要的視口設(shè)備，并帶有 3 個(gè)精確的輔助單位，從而實(shí)現(xiàn)了 24 種組合。

在本文中，我會(huì)分解為6個(gè)主要視口小工具和 3 個(gè)精準(zhǔn)單位中的每一個(gè)，以便你可以在所有情況下使用視口小工具。

原始的4個(gè)視口單位

之前CSS 的主要視窗口單位有 vw、vh、vmin 和 vmax。你可能已經(jīng)習(xí)慣使用這些單位，因此，我將在解釋它們時(shí)盡量簡(jiǎn)短。

vw:

vw 代表視口寬度，代表視口寬度的百分比。比 vw 更早的范圍是這個(gè)時(shí)期的視口寬度。

例如，如果你寫(xiě)了 10vw，那么，這將構(gòu)成視口寬度的 10% 的周期。

視口只是屏幕比例的一個(gè)精心設(shè)計(jì)的短語(yǔ)，因此，如果你使用的是寬度為 1920 像素的大型計(jì)算機(jī)設(shè)備，則 10vw 就是 192 像素。

如果你使用的是寬度為 300 像素的手機(jī)，那么 10vw 剛好是 30 像素。

vh:

Vh 代表視口高度，與 vw 完全相同，但代表高度值而不是寬度。這些小工具可以一起使用，以使細(xì)節(jié)填滿屏幕的整個(gè)長(zhǎng)度。

兩個(gè)新的視口單位

CSS 一直在尋求從嚴(yán)格的頂部/底部、左/右、高度/寬度版本過(guò)渡到一個(gè)額外的動(dòng)態(tài)開(kāi)始/結(jié)束、塊/內(nèi)聯(lián)版本。進(jìn)行此修改的最重要原因是降低對(duì)你的代碼執(zhí)行非凡的編寫(xiě)指南的難度。

如果你的整個(gè)軟件從水平寫(xiě)入路徑切換到垂直寫(xiě)入路徑，那么頂部/底部或?qū)挾?高度的概念并不總是意味著相同的元素，因?yàn)槿绻阆Ｍ谀愕纳戏胶拖路教砑犹畛湮谋緝?nèi)容這將被表示為在垂直書(shū)寫(xiě)機(jī)器中向左和向右的填充，而不是填充頂點(diǎn)和底部。這就是 CSS 帶來(lái) vi 和 vb 視口單元的原因。

vi：

vi 代表 Viewport Inline，代表文檔的內(nèi)聯(lián)方向。在水平書(shū)寫(xiě)方向上，這對(duì)應(yīng)于視口的寬度，而在垂直書(shū)寫(xiě)方向上，這表示視口的高度。

記住 inline 方向的簡(jiǎn)單方法是記住它與文本的方向相同。另一種記住這一點(diǎn)的方法是，如果你有兩個(gè)彼此相鄰的內(nèi)聯(lián)元素（例如兩個(gè)跨度），那么它們堆疊的方向就是你的內(nèi)聯(lián)方向。

VB：

vb 代表 Viewport Block，代表文件的塊路徑。這是 vi 的另一個(gè)，因此在水平寫(xiě)入路徑中，這可以對(duì)應(yīng)于視口頂部，而在垂直文件中，這可以構(gòu)成視口的寬度。

如果你不想忘記這個(gè)單元，請(qǐng)不要忘記塊路由將始終是塊元素（作為實(shí)例 div）將堆疊在另一個(gè)頂點(diǎn)上的路由。

視口單位修改器

因此，我們已經(jīng)涵蓋了6種主要類(lèi)型的視口設(shè)備，但是，你可以將 3 種出色的修改器上傳到設(shè)備上，以使它們?cè)谀愕囊暱诳梢愿淖兇笮〉耐瑫r(shí)以其他方式表現(xiàn)。

例如，當(dāng)你使用蜂窩智能手機(jī)上網(wǎng)時(shí)，你可以觀察到 URL 欄會(huì)在你向下滾動(dòng)時(shí)消失。當(dāng)這種情況發(fā)生時(shí)，你的視口在技術(shù)上會(huì)修改長(zhǎng)度，考慮到現(xiàn)在 URL 欄現(xiàn)在不占用你的視口的一部分。現(xiàn)代 CSS 設(shè)備沒(méi)有任何方式來(lái)應(yīng)對(duì)視口長(zhǎng)度的這種變化，這就是添加這些修飾符的原因。

這些修飾符是 s、l 和 d。為了應(yīng)用修改器，你只需要將修改器放在品種之后且早于 10svw 之類(lèi)的單位。這為 6 個(gè)視口單元中的每一個(gè)提供了四種通用混合模式：

•  vw
•  svw
  
•  lvw
  
•  dvw.
  

因此，我們?cè)诒疚闹斜Ｗo(hù)的整個(gè)距離都沒(méi)有使用完全有效的修飾符。當(dāng)你在單元上不操作任何修飾符時(shí)，包括 10vw 或 10vh，瀏覽器通常會(huì)默認(rèn)使用三個(gè)修飾符之一，主要完全基于瀏覽器的實(shí)現(xiàn)。

S Modifier:

s 修飾符代表 Small 并且代表最小的可行視口。在我們的 cell telecellsmartphone 實(shí)例中，這將是顯示 URL 欄時(shí)視口的長(zhǎng)度。如果你將細(xì)節(jié)設(shè)置為 100svh，它將占據(jù)顯示峰值的 100%，這主要完全取決于顯示 URL 欄時(shí)的顯示尺寸。如果看到 URL 欄，它現(xiàn)在不再計(jì)算，或者現(xiàn)在該單元不再將其長(zhǎng)度始終基于 URL 欄顯示時(shí)可能的視口長(zhǎng)度。

l Modifier:

l Modifier代表Large，代表最大的可行視口。這是 s 修飾符的很多替代品。在我們的蜂窩 Telecellsmartphone 實(shí)例中，這將是視口的長(zhǎng)度，而 URL 欄不顯示。如果你將細(xì)節(jié)設(shè)置為 100lvh，它將吸收 100% 的顯示峰值，主要完全基于顯示的比例，而 URL 欄不顯示。如果看到 URL 欄，它現(xiàn)在不再計(jì)數(shù)，或者如果 URL 欄不顯示，這個(gè)單元將不再根據(jù)視口的長(zhǎng)度持續(xù)計(jì)算它的長(zhǎng)度，這意味著如果您將細(xì)節(jié)設(shè)置為 100lvh 并且 URL條正在顯示它在技術(shù)上將比顯示器大。

D Modifier

d Modifier代表動(dòng)態(tài)，代表當(dāng)前視口長(zhǎng)度。這是 s 和 l 修飾符的集合。在我們的手機(jī)實(shí)例中，這通常是當(dāng)前視口的尺寸，無(wú)論 URL 欄是否顯示。如果我們的 URL 欄正在顯示，則 d 修飾符是等長(zhǎng)的，因?yàn)?s 修飾符，而如果 URL 欄沒(méi)有顯示，d 修飾符是等長(zhǎng)的，因?yàn)?l 修飾符。

在顯示和隱藏 URL 欄之間的過(guò)渡期間，此單元將動(dòng)態(tài)縮放大小，因此它始終會(huì)填滿所有可用空間。如果你需要保證元素始終根據(jù)視口調(diào)整大小但可能會(huì)很費(fèi)力，因?yàn)殡S著大小的不斷變化，它會(huì)導(dǎo)致大量重繪。

結(jié)論

雖然 24 個(gè)視口單位，可能感覺(jué)很多，但把它們拆分為 6 個(gè)加 3 個(gè)修飾符的話，你就會(huì)覺(jué)得這一切都非常簡(jiǎn)單。然而，這些簡(jiǎn)單的組合為我們構(gòu)建理想的 CSS 布局提供了強(qiáng)大的能量，希望這個(gè)內(nèi)容對(duì)你學(xué)習(xí)CSS有所幫助。