在前端開發中,我們經常需要使用到屏幕的高度,例如設置全屏背景圖片、響應式布局等。那么,怎樣在CSS中獲取屏幕高度呢?
height: 100vh;
我們可以使用CSS中的“100vh”單位來獲取屏幕的高度。其中,“vh”即為“View Height”的縮寫,代表屏幕的百分比高度。因此,設置一個元素的高度為“100vh”即為占據整個屏幕高度的100%。
比如,我們可以設置全屏背景圖片的樣式:
body { background: url(your-img.jpg) no-repeat center center fixed; background-size: cover; height: 100vh; }
這樣就可以讓背景圖片占據整個屏幕,無論用戶觀看屏幕時,圖片都會被完整展示。
除了“100vh”外,我們還可以根據具體需求調整高度的百分比,例如“50vh”則占據屏幕高度的50%。
通過CSS獲取屏幕高度非常方便,可以幫助我們更好地實現頁面效果,提升用戶體驗。