CSS 新單位 lvh、svh、dvh

一般我們很常透過 vw、vh 來寫一些需要依照畫面等比例顯示的東西，可是手機瀏覽器會在滑動的時候隱藏網址列和工具列，變畫面大小很容易造成畫面跑版，意思就是網頁已經載入的元件會因為我們划手機而忽大忽小。

所幸現在有新的單位 lvh、svh、dvh 來解決這個問題。

1. lvh (Large Viewport Height)

視窗可能的最大高度。
工具列完全隱藏時的高度。
適合用在全螢幕模式，確保內容不會被裁切。

2. svh (Small Viewport Height)

視窗可能的最小高度。
工具列完全顯示時的高度。
適合用在最保守的設計，確保內容永遠可見。

3. dvh (Dynamic Viewport Height)

動態高度，隨著工具列出現/消失而改變。
基本上就是「新版的 vh」，但更準確，能正確反映即時的 viewport 大小。

參考文件

留言