理解 :root 和 var()
自定義屬性是一個名稱以兩個連字符（ - ）開頭的屬性，如 --foo。 定義后可以使用 var() 引用的變量。
css
1 :root { 2 --view-height: 0; 3 }
在:root選擇器中定義自定義屬性意味着它們可以作用於全局文檔中所有元素。:root是一個CSS偽類，它匹配文檔的根元素 – <html>元素。它類似於 html 選擇器，但具有更高的優先級。
您可以在文檔中的任何位置訪問 :root 中的自定義屬性的值：
1 div { 2 height: calc(var(--view-height) - 10px); 3 }
您還可以在CSS變量中包含回退值。例如：
1 div { 2 height: var(--view-height, 100px); 3 }
如果未定義自定義屬性，則使用其回退值代替。
使用JavaScript更改CSS自定義屬性
1 const vh = document.documentElement.clientHeight; 2 document.documentElement.style.setProperty('--view-height', vh+'px');