CSS 動態視區單位 dvw / dvh 簡介與使用情境
2023-04-20 17:18:24
對於前端工程師而言,我們在做網頁切版的時候,經常使用 `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` 進行設置的浮動對話框高度,在完整顯示工具列和網址列時,會導致對話框最下方的內容超出可視範圍,無法被使用,請特別參考下圖右邊超出視區的高度標示部份:
![image](wehelp-storage://3cad04ba7cea3221909fc3257a1c4780)
最新的 `dvh` 動態視區高度單位,則能夠彈性的考慮視區高度是否包含工具列和網址列,請參考以下示意圖的高度標示:
![image](wehelp-storage://99efb8e2d163fe6a83791ecbc1b852ee)
因此,使用 `dvh` 就能順利解決浮動對話框高度,在工具列或網址列顯示時,超出可視範圍的問題。只要我們將浮動對話框的高度設定為 `100dvh` 如下:
``` css
.dialog{
position:fixed;top:0px;left:0px;
width:100vw;height:100dvh;
}
```
就能順利運用最新的 **CSS** 的 **Dynamic Viewport Units** 動態視區尺寸單位,滿足各種動態變化下的寬高、大小設置需求。
點擊複製文章連結
X