考慮到未來響應式設計的開發，如果你需要，瀏覽器的高度也可以基于百分比值調整。但使用基于百分比值并不總是相對于瀏覽器窗口的大小定義的最佳方式，比如字體大小不會隨著你窗口改變而改變，如今css3引入的新單位明確解決這一問題。

View Demo

css3引入的”vw”和”vh”基于寬度/高度相對于窗口大小，”vw”=”view width”, “vh”=”view height”; 以上我們稱為視窗單位允許我們更接近瀏覽器窗口來定義大小。 參照demo案例對照下面四個容器的css樣式:

.demo {width: 100vw;font-size: 10vw; /* 寬度為窗口100%， 字體大小為窗口的10% */ } .demo2 {width: 80vw;font-size: 8vw; /* 寬度為窗口80%， 字體大小為窗口的8% */ } .demo3 {width: 50vw;font-size: 5vw; /* 寬度為窗口50%， 字體大小為窗口的5% */ } .demo4 {width: 10vw;height: 50vh; /* 寬度為窗口10%， 容器高度為窗口的50% */ }

大家可以把demo窗口收縮來查看不同大小時候的變化。目前這款css3的應用支持所有主流瀏覽器，IE必須10以上。

轉載于:https://www.cnblogs.com/crazycode2/p/6786376.html

總結

以上是生活随笔為你收集整理的css新单位 vw , vh的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。