CSS 視窗單元對於創建適應不同螢幕尺寸的響應式佈局至關重要。這些單位測量相對於視窗高度和寬度的尺寸，使開發人員能夠設計靈活且適應性強的 Web 介面。本指南將涵蓋傳統的 vh 和 vw 單位，並介紹 dvh、lvh 和 svh 等較新的單位，解釋它們如何增強響應能力並更有效地處理視口變化。
視口單位是相對單位，可依瀏覽器視窗的大小動態調整。最常用的是：
這些單元可以輕鬆設計隨瀏覽器視窗大小縮放的元素。例如：
div {
width: 50vw; /* 50% of the viewport width */
height: 100vh; /* 100% of the viewport height */
background-color: lightblue;
}
在此範例中，div 跨越視窗的一半寬度和整個高度。
雖然 vh 和 vw 在大多數情況下都能很好地工作，但它們無法考慮視口中的某些動態變化，例如：
這些限制可能會導致設計看起來不一致或導致意外的佈局問題，尤其是在行動裝置上。
為了解決這些問題，CSS 引入了三個新單位：dvh（動態視口高度）、lvh（大視口高度）和 svh（小視窗高度）。
dvh 動態調整以適應視窗中的變化，例如瀏覽器 UI 元素的出現或消失。它代表當前視窗高度的 1%，確保您的佈局即時適應。
範例：
div {
height: 100dvh; /* Adjusts dynamically to visible viewport height */
background-color: lightgreen;
}
這可以確保 div 始終適合可見區域，即使瀏覽器 UI 變更也是如此。
lvh 表示最大可能視窗高度的 1%，忽略動態 UI 變更（例如行動網址列）。
範例：
div {
height: 100lvh; /* Fixed to the maximum viewport height */
background-color: lightcoral;
}
這對於需要保持一致性的佈局非常有用，無論瀏覽器 UI 如何更改。
svh 代表最小可能視窗高度的 1%，適應瀏覽器 UI 佔據螢幕很大一部分的場景。
範例：
div {
width: 50vw; /* 50% of the viewport width */
height: 100vh; /* 100% of the viewport height */
background-color: lightblue;
}
在處理鍵盤彈出視窗等 UI 元素可以縮小可見區域的裝置時，此單元特別有用。
vw 測量視口寬度的 1%。它保持一致，並且不受滾動或 UI 外觀等動態變化的影響。
範例：
div {
height: 100dvh; /* Adjusts dynamically to visible viewport height */
background-color: lightgreen;
}
這非常適合水平佈局或全角設計。
以下是這些單位在現實場景中的應用方式：
div {
height: 100lvh; /* Fixed to the maximum viewport height */
background-color: lightcoral;
}
這可以確保英雄部分始終適合螢幕，即使移動地址列隱藏或出現也是如此。
div {
height: 100svh; /* Adjusts to the smallest viewport height */
background-color: lightgoldenrodyellow;
}
使用 svh 確保即使螢幕鍵盤降低視窗高度，模式仍然可用。
div {
width: 100vw; /* Full viewport width */
background-color: lightpink;
}
黏性頁腳，可在各種裝置上保持其大小。
您可以混合搭配這些單元以獲得更具適應性的設計。例如：
.hero {
height: 100dvh; /* Ensures the hero fits the visible viewport */
width: 100vw;
background: url('hero.jpg') no-repeat center center/cover;
}
這種方法確保設計適應所有可能的視口場景。
雖然 vh 和 vw 得到了跨瀏覽器的廣泛支持，但 dvh、lvh 和 svh 是新添加的內容。確保檢查瀏覽器相容性並為舊版瀏覽器提供後備方案。
後備範例：
.modal {
height: 100svh; /* Accounts for the smallest viewport height */
width: 100vw;
overflow-y: auto; /* Allows scrolling if needed */
background-color: white;
}
vh、vw、dvh、lvh 和 svh 等 CSS 視窗單元是創建響應式和適應性強的網頁設計的強大工具。雖然 vh 和 vw 可以處理大多數情況，但較新的 dvh、lvh 和 svh 單元可以解決限制，尤其是在行動裝置上。透過理解和利用這些單元，行動應用程式開發人員可以製作出適用於所有裝置和場景的無縫、使用者友好的設計。
以上是CSS 視窗單位：CSS *vh（dvh、lvh、svh）和 *vw 單位的詳細內容。更多資訊請關注PHP中文網其他相關文章！
