CSS3 vh-是CSS3的一個(gè)新功能，它允許我們使用視口高度（Viewport Height）單位來(lái)設(shè)置元素的高度。視口高度指的是瀏覽器窗口的高度，而不同設(shè)備和屏幕大小的視口高度也不同。

/* 示例代碼 */
.header {
height: 50vh;  /* 設(shè)置頭部高度為視口高度的50% */
}

使用vh單位可以使我們的布局更加靈活，無(wú)需擔(dān)心不同設(shè)備的屏幕大小，通過(guò)vh可以讓元素自適應(yīng)并占據(jù)視口的一定比例，達(dá)到良好的視覺(jué)效果。

值得注意的是，vh單位不支持在IE8及以下版本的瀏覽器中使用。如果要兼容老版本瀏覽器，我們可以使用JavaScript來(lái)實(shí)現(xiàn)相似的效果。

// 兼容IE8及以下版本瀏覽器的JavaScript代碼
function fullScreen() {
var ele = document.getElementById('ele'); // 獲取元素
ele.style.height = window.innerHeight + 'px'; // 設(shè)置元素高度為視口高度
}
window.onload = fullScreen; // 頁(yè)面加載時(shí)調(diào)用
window.onresize = fullScreen; // 窗口大小改變時(shí)調(diào)用

CSS3 vh-的應(yīng)用場(chǎng)景非常廣泛，在移動(dòng)端和PC端的響應(yīng)式設(shè)計(jì)中都會(huì)常常用到。它可以幫助我們快速地實(shí)現(xiàn)自適應(yīng)布局，并且支持CSS3的動(dòng)畫效果，讓頁(yè)面更加生動(dòng)有趣。