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

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

原始的4個視口單位

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

vw:

vw 代表視口寬度，代表視口寬度的百分比。比 vw 更早的范圍是這個時期的視口寬度。

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

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

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

vh:

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

兩個新的視口單位

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

如果你的整個軟件從水平寫入路徑切換到垂直寫入路徑，那么頂部/底部或?qū)挾?高度的概念并不總是意味著相同的元素，因為如果你希望在你的上方和下方添加填充文本內(nèi)容這將被表示為在垂直書寫機器中向左和向右的填充，而不是填充頂點和底部。這就是 CSS 帶來 vi 和 vb 視口單元的原因。

vi：

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

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

VB：

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

如果你不想忘記這個單元，請不要忘記塊路由將始終是塊元素（作為實例 div）將堆疊在另一個頂點上的路由。

視口單位修改器

因此，我們已經(jīng)涵蓋了6種主要類型的視口設(shè)備，但是，你可以將 3 種出色的修改器上傳到設(shè)備上，以使它們在你的視口可以改變大小的同時以其他方式表現(xiàn)。

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

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

•  vw
•  svw
  
•  lvw
  
•  dvw.
  

因此，我們在本文中保護的整個距離都沒有使用完全有效的修飾符。當你在單元上不操作任何修飾符時，包括 10vw 或 10vh，瀏覽器通常會默認使用三個修飾符之一，主要完全基于瀏覽器的實現(xiàn)。

S Modifier:

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

l Modifier:

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

D Modifier

d Modifier代表動態(tài)，代表當前視口長度。這是 s 和 l 修飾符的集合。在我們的手機實例中，這通常是當前視口的尺寸，無論 URL 欄是否顯示。如果我們的 URL 欄正在顯示，則 d 修飾符是等長的，因為 s 修飾符，而如果 URL 欄沒有顯示，d 修飾符是等長的，因為 l 修飾符。

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

結(jié)論

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