現代 CSS 中的視窗高度和寬度單位

當我不斷遇到僅使用傳統視口單位vh 和vw 的CSS 代碼庫和主題定義時，我考慮寫一篇關於我們現在可以使用的強大工具的博客文章，這可以讓我們的生活更輕鬆，讓我們的CSS 程式碼變得更好。

好的舊視窗單元

長話短說，多年來我們一直使用 vh 和 vw 將某些內容定義為初始視口高度和寬度的百分比。例如，如果我們想用綠色填滿所有裝置的整個視窗，我們可以執行以下操作：

.big-fat-green-element {
  background: green;
  height: 100vh;
  width: 100vw;
}

..這可能會成功。但這只能可靠地工作，除非出於某種原因，某些東西影響了可見視口。例如，一旦用戶開始滾動頁面，大多數現代行動瀏覽器都會隱藏部分或全部標題和地址欄，這也會影響視口並使我們的大而胖的綠色元素變得不那麼大。

現代視口單位

如今，在最新的 CSS 規範中，我們可以安全地使用所謂的大、小和動態視窗單元。

大視窗單位

大視窗百分比單位 (lv*) 和預設視窗百分比單位 (v*) 是根據大視窗大小定義的：視窗大小假設任何動態擴展和縮回的 UA 介面都會被縮回。

本質上，lvh 和 lvw 為我們提供了單位，我們可以將其用作當瀏覽器 UI 最小且網站內容處於最大狀態時相對於視口的百分比。 lvh 和 lvw 實際上會提供我們與傳統 vh 和 vw 單位相同的行為。

範例：使用 lvh 和 lvw 單位的範例是定義應充當整頁背景的元素的高度和寬度。

/* Full-page background using largest available viewport height and width, regardless of other elements or browser UI state. */
.full-page-background {
  height: 100lvh;
  background: #f51;
  position: fixed;
  top: 0;
  left: 0;
  width: 100lvw;
  z-index: -1; /* Ensure it stays behind other content */
}

小視窗單位

小視窗百分比單位 (sv*) 是根據小視窗大小定義的：視窗大小假設任何動態展開和縮回的 UA 介面都會展開。

換句話說，svh 和 svw 為我們提供了可以用來當瀏覽器 UI 處於最大狀態且網站內容處於最小狀態時填充螢幕的單位。

範例：使用 svh 單位的一個很好的例子是定義固定底部欄或靜態標題的高度。

/* Header with static height, 10% of the smallest available viewport 
 * e.g. when the browser UI is visible on mobile devices */
.header {
  height: 10svh;
  background-color: #642;
}

動態視窗單位

動態視窗百分比單位 (dv*) 是根據動態視窗大小定義的：動態考慮動態擴展和縮回的任何 UA 介面來調整視窗大小。

即使視口本身不變，動態視窗百分比單位的大小也不穩定。使用這些單位可能會導致內容調整大小，例如當使用者捲動頁面時。根據使用情況，這可能會對使用者造成乾擾和/或在效能方面代價高昂。

雖然dvh 和dvw 單位聽起來很理想，但上面定義中指出的注意事項以及我在滾動元素中使用它們時遇到的一些問題，使我得出結論，我們應該只在非常特定的情況下使用它們。

範例 1：使用 dvh 的一個例子是定義應根據視口變化進行調整的內容元素的高度。

/* Main content adjusts dynamically. 
 * Since we used dvh the element height will align with the actual viewport and adapt to its changes */
.adjustable-content {
  background-color: #895;
  height: calc(100dvh - 10svh); /* Adjust height considering header */
  overflow: auto;
  padding: 10px;
}

範例2：上週我遇到了這種情況，當時報告了一個關於表單的錯誤，該錯誤根據設計，滾動被禁用，而表單將佔據視口的整個高度和寬度。當行動用戶將注意力集中在輸入上且裝置鍵盤會顯示時，就會出現該錯誤。那麼表單佈局就會被破壞。修復方法是使用 dvh 而不是 vh 來定義其高度。

Codepen 與範例

最後這裡有一個代碼筆，您可以在其中看到現代視口單元的運作。享受吧！

以上是現代 CSS 中的視窗高度和寬度單位的詳細內容。更多資訊請關注PHP中文網其他相關文章！