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

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

原始的4個視口單位

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

vw:

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

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

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

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

vh:

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

兩個新的視口單位

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

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

vi：

vi 代表 Viewport Inline，代表文檔的內聯方向。在水平書寫方向上，這對應于視口的寬度，而在垂直書寫方向上，這表示視口的高度。

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

VB：

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

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

視口單位修改器

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

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

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

•  vw
•  svw
  
•  lvw
  
•  dvw.
  

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

S Modifier:

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

l Modifier:

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

D Modifier

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

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

結論

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