Small Large and Dynamic viewport units

玩轉CSS單位：了解 Small, Large, and Dynamic viewport units 的神奇用途！

邱祈竣 2023/03/31 17:40:58

0 4598

當我們設計一個網站時，網頁的大小會根據使用者的螢幕大小而有所不同，因此設計師需要確保網頁的元素在任何大小的螢幕上都能正確顯示。這就是 CSS viewport units 所做的事情，其中包括 Small、Large 和 Dynamic viewport units。

一般我們在使用 css 時 vw 和 vh 是我們比較熟悉的兩個單位， 100vw 和 100vh 代表填滿視窗的寬和高。
在電腦瀏覽器上且沒有 scroll bar 時看起來會像：

但這在手機上會出現一些奇怪的問題，當填入 100vh 時若有網址列/工具列會產生超出螢幕的情況，當滑動頁面讓網址列/工具列消失後高度又會回復正常。這是因為手機默認 100vh 是不會計算網址列與工具列的高度。如下圖：

為了處理這個問題， css 新增加了 Small, Large, and Dynamic viewport units

Small viewport units：當螢幕高度小於或等於 600px 時，CSS 中的 small viewport units 就會生效。
Large viewport units：當螢幕高度大於 600px 時，CSS 中的 large viewport units 就會生效。
Dynamic viewport units：動態 viewport units 可以根據螢幕大小自動調整。dvh 會動態更新成 lvh 或 svh。
例如： 100 dvh 在 600px 以上時會變成 100lvh，在 600px 以下時會變成 100 svh

這些 viewport units 可以讓開發者在不同螢幕大小上設計更加靈活和可靠的網頁排版和佈局。

Small viewport units：100 svh 時在不同手機上與 100 lvh 的差異（有網址列/工具列），可以看到 svh 會把網址列與工具列加入計算，使高度不會超出顯示頁面。

Large viewport units：100 lvh 時在不同手機上與 100 svh的差異（無網址列/工具列），lvh 不會把網址列與工具列加入計算，維持與 vh 相同的高度，這使得當手機瀏覽器上未顯示網址列與工具列時也能把頁面填滿，但 svh就會在下方出現空白。

通過 Small viewport units 與 Large viewport units 這兩種新增的 css 屬性解決了手機端一直以來都存在的問題更能對軟體開發者帶來以下幫助：

更好的響應式設計：使用 viewport units 可以讓網頁在不同螢幕大小上呈現出更好的響應式設計效果，從而提高網頁的可用性和易用性。
簡化佈局和排版：viewport units 可以讓開發者更方便地設計網頁的佈局和排版，從而減少開發時間和精力成本。
提高設計靈活性：使用 viewport units 可以讓設計師更靈活地設計網頁，並可以更容易地對設計進行調整，以適應各種螢幕大小和解析度。
更好的可維護性和可擴展性：使用 viewport units 可以讓代碼更為簡潔、易讀和易於維護，同時也提高了代碼的可擴展性。

總的來說，CSS 的 Small、Large 和 Dynamic viewport units 可以讓軟體開發者更快速、更簡便地開發出具有良好響應性和可用性的網頁，從而為使用者提供更好的使用體驗。

目前 Small, Large, and Dynamic viewport units 對所有瀏覽器的支援已經達86.66%，市面上主流的瀏覽器已經全都有支援。

注意事項：
1. 所有 viewport 單位都「沒有」考慮 scrollbar 的寬度。需要考慮超出可視面積時的狀況。
2. 各瀏覽器更新速度因性能考量更新速度並不相同，當更新速度小於瀏覽器 UI 縮放的更新速度時，dvh 或 dvw 的區塊可能會出現奇怪的縮放。
3. 手機的虛擬鍵盤不影響 viewport 單位的值。