CSS中有一個叫作vh的單位,它代表視窗高度的百分比。vh是Viewport Height的縮寫,也就是視窗高度。通過在CSS中使用vh單位,我們可以根據當前設備的屏幕大小和分辨率來自適應調整元素的大小和位置。
/* 使用vh單位實現全屏背景圖 */ header { background-image: url(bg-image.jpg); background-size: cover; background-position: center; height: 100vh; } /* 使用vh單位實現響應式字體大小 */ h1 { font-size: 5vh; line-height: 1; } /* 使用vh單位實現中央對齊 */ .container { position: relative; height: 50vh; } .item { position: absolute; top: 50%; transform: translateY(-50%); }
可以看到,在上述示例中我們使用vh單位實現了各種自適應調整,從實現全屏背景圖、響應式字體大小,到居中元素等等。但是需要注意的是,vh單位的使用也有一些限制。比如,在某些瀏覽器中,當用戶調整頁面大小時,CSS計算vh單位的值可能會受到影響,因而產生不必要的變化。
綜上所述,vh是CSS中非常有用的單位,它可以幫助我們根據視口的大小自適應修改元素的大小和位置。但是在使用它的時候,需要注意一些瀏覽器的兼容性問題。