視窗單位一直都存在爭(zhēng)議，部分原因是因?yàn)橐苿?dòng)端瀏覽器對(duì)如何實(shí)現(xiàn)視窗單位有著自己的看法，這樣就讓本來(lái)簡(jiǎn)單的事情變得更加復(fù)雜化。
 
一個(gè)典型的示例是：
 
vw的計(jì)算是否要包含瀏覽器的滾動(dòng)條？
那么網(wǎng)站的導(dǎo)航或頁(yè)面控件呢？
這些應(yīng)該算在計(jì)算中嗎？
還有一些設(shè)備本身的物理屬性（比如iPhone X的劉海）是不容忽視的。
 
 
 
首先，了解一下背景
 
有關(guān)于如何計(jì)算視窗單位的規(guī)范描述的相當(dāng)模糊。對(duì)于移動(dòng)設(shè)備，我們通常關(guān)心的是高度，所以讓我們具體來(lái)看一下視窗單位中的vh：
 
vh unit：Equal to 1% of the height of the initial containing block.
 
直譯過(guò)來(lái)，大致的意思是“vh等于初始包含塊高度的1%”。
 
所以，在處是設(shè)備和特定的瀏覽器的區(qū)別方面，沒(méi)有明確的指導(dǎo)。
 
vh最初是由瀏覽器的當(dāng)前視窗計(jì)算的。如果你打開(kāi)瀏覽器開(kāi)始加載一個(gè)網(wǎng)站，1vh等于你屏幕高度的1%（減去瀏覽器界面）。
 
1vh = window.innerHeight。
 
但是！如果你開(kāi)始滾動(dòng)，那就另當(dāng)別論了。一旦你通過(guò)了一個(gè)瀏覽器界面，比如地址欄，vh值就會(huì)更新，結(jié)果就是內(nèi)容的跳躍。
 
iOS的Safari瀏覽器是最早更新其實(shí)現(xiàn)的移動(dòng)端瀏覽器之一，它選擇根據(jù)屏幕的最大高度為vh的計(jì)算值（為vh定義一個(gè)固定值）。這樣，一旦地址欄離開(kāi)視窗，用戶在頁(yè)面上也不會(huì)看到內(nèi)容的閃跳。
 
 
雖然使用固定值很好，但這也意味著如果地址欄在視窗中，就不能有一個(gè)全屏高度的元素。元素的底部將被裁剪。
 

 
正如上圖所示，當(dāng)?shù)刂窓谠谝暣爸袝r(shí)（左圖），元素的底部被裁剪，但我們想要的是元素底部不被裁剪（右圖）。
 
 
 
CSS自定義屬性：調(diào)整大小的技巧
 
我突然想到，CSS自定義屬性和幾行JavaScript代碼可能是獲得所需的一致和正確大小的完美解決方案。
 
在JavaScript中，你始終可以使用全局變量window.innerHeight獲得當(dāng)前視窗的值。這個(gè)值考慮了瀏覽器的界面，并在其可見(jiàn)性（visibility）發(fā)生變化時(shí)進(jìn)行了更新。訣竅就是將視窗（viewport）值存儲(chǔ)在CSS自定義屬性（CSS變量）中，并將其應(yīng)用于元素，而不是vh單位。
 
假設(shè)我們?cè)诶又性O(shè)置一個(gè)CSS自定義屬性：--vh。這意味著我們將在CSS像下面這樣使用這個(gè)自定義屬性：
 
.my-element {
    height: 100vh; /* 為不支持自定義屬性的瀏覽器做降級(jí)處理 */
    height: calc(var(--vh, 1vh) * 100);
}
好了，這就搞定了，就是這么的簡(jiǎn)單?，F(xiàn)在讓我們使用JavaScript來(lái)獲得視窗的內(nèi)部高度（window.innerHeight）：
 
// 首先獲取視窗高度，再乘以1%得到vh單位的值
let vh = window.innerHeight * 0.01;
 
// 把--vh的值設(shè)置到文檔的根元素中
document.documentElement.style.setProperty('--vh', `${vh}px`);
因此，我們告訴JavaScript獲取視窗的高度，然后占這個(gè)值的1%，所以我們就可以將值指定為視窗高度單位值。然后使用JavaScript在:root中創(chuàng)建CSS自定義屬性--vh。
 
因此，我們現(xiàn)在就可以像使用其他單位一樣使用--vh作為高度值，然后乘以100就能得到我們想要的高度值。

親自體驗(yàn)一下，調(diào)整視窗的高度，在根元素html中可以看到--vh值是動(dòng)態(tài)變化的：
 

 
還有一個(gè)小細(xì)節(jié)
雖然我們的工作看上去已經(jīng)完成了，但是對(duì)于追求細(xì)節(jié)的同學(xué)而言，可能已經(jīng)發(fā)現(xiàn)了，當(dāng)視窗的高度改變時(shí)，不會(huì)自動(dòng)更新元素的大小。那么我們接著在上面的示例上進(jìn)行調(diào)整。
 
我們可以監(jiān)聽(tīng)window的resize事件來(lái)更新--vh的值。如果用戶旋轉(zhuǎn)設(shè)備屏幕，比如從橫向到縱向，或者導(dǎo)航移動(dòng)到滾動(dòng)視窗之外，這樣就非常方便。
 
// 監(jiān)聽(tīng)resize事件
window.addEventListener('resize', () => {
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
});
更新--vh的值將會(huì)觸發(fā)頁(yè)面重繪，用戶可能會(huì)感覺(jué)頁(yè)面在跳動(dòng)。因此，我并不是說(shuō)這個(gè)技巧應(yīng)該用于每個(gè)項(xiàng)目，或者替換vh單位的所有用法，但是只有當(dāng)你需要你的用戶擁有一個(gè)確切的視窗單位值時(shí)才使用。
 
此外，你可能希望resize事件實(shí)現(xiàn)debounce方法，以避免在用戶調(diào)整瀏覽器窗口大小時(shí)觸發(fā)許多事件。