CSS可以實現自動獲取屏幕高度和寬度,這對于響應式設計非常重要。CSS中有兩個屬性可以幫助我們實現這個功能,分別是vh
和vw
。
// 獲取屏幕高度 height: 100vh; // 獲取屏幕寬度 width: 100vw;
這個代碼塊可以讓元素的高度和寬度分別等于屏幕的高度和寬度。如果需要元素的高度或寬度占據整個屏幕的一部分,我們可以使用相應的百分比,例如:
// 元素高度為屏幕高度的50% height: 50vh; // 元素寬度為屏幕寬度的25% width: 25vw;
值得注意的是,vh
和vw
是CSS3屬性,不支持CSS3的瀏覽器將不支持這個功能。否則,這個方法是十分簡單、有效的屏幕響應式設計方法。