對於前端工程師而言，我們在做網頁切版的時候，經常使用 `vw` 和 `vh` 這種基於視區 (Viewport) 尺寸來計算的寬高單位，例如 `1vw` 就代表總視區寬度的 1% 寬，而 `10vh` 就代表總視區高度的 10% 高。今天，要和大家介紹 **CSS 全新的動態視區單位 (Dynamic Viewport Units)** 中的 `dvw` 和 `dvh`，簡單摘要如下： - `vw` 以總視區寬度為基準的百分比數 - `vh` 以總視區高度為基準的百分比數 - `dvw` 同上，但會考慮總視區寬度是否包含工具列和網址列的動態變化 - `dvh` 同上，但會考慮總視區高度是否包含工具列和網址列的動態變化 在大多數的情況下，`vw` 和 `vh` 這樣的尺寸單位相當好用，例如讓常見的開合選單由頂部滑出，並且佔據整個視區的寬度，就可以使用 `100vw`。不過，近來，因為手機瀏覽器對於工具列和網址列內建的動態調整機制，我們碰到了關於動態視區高度的難題，說明如下： ------- 如果我們想要在手機版的網頁中，打開一個跳出式的功能對話框，並且佔滿整個畫面，那麼，我們第一時間的想法是在這個對話框中使用 `100vw` 和 `100vh` 來設定寬高為滿版，使用 `position:fixed` 浮動在靜態的版面上方，可能的設置如下： ``` css .dialog{ position:fixed;top:0px;left:0px; width:100vw;height:100vh; } ``` 然而，許多現代手機的瀏覽器為了增加可閱讀的空間，在使用者往下捲動網頁內容時，會將工具列或者網址列隱藏；使用者往上捲動時，又重新顯示出來。而不同的手機作業系統和瀏覽器，在顯示和隱藏之間的行為模式，還不完全一樣。 在這種新的手機瀏覽器行為模式下，我們使用 `100vh` 進行設置的浮動對話框高度，在完整顯示工具列和網址列時，會導致對話框最下方的內容超出可視範圍，無法被使用，請特別參考下圖右邊超出視區的高度標示部份：  最新的 `dvh` 動態視區高度單位，則能夠彈性的考慮視區高度是否包含工具列和網址列，請參考以下示意圖的高度標示：  因此，使用 `dvh` 就能順利解決浮動對話框高度，在工具列或網址列顯示時，超出可視範圍的問題。只要我們將浮動對話框的高度設定為 `100dvh` 如下： ``` css .dialog{ position:fixed;top:0px;left:0px; width:100vw;height:100dvh; } ``` 就能順利運用最新的 **CSS** 的 **Dynamic Viewport Units** 動態視區尺寸單位，滿足各種動態變化下的寬高、大小設置需求。