使用css新單位vw,vh在響應式設計中的應用方法

來源:互聯網
上載者:User
考慮到未來響應式設計的開發,如果你需要,瀏覽器的高度也可以基於百分比值調整。但使用基於百分比值並不總是相對於瀏覽器視窗的大小定義的最佳方式,比如字型大小不會隨著你視窗改變而改變,如今css3引入的新單位明確解決這一問題。

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% */}html代碼:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>無標題文檔</title><link href="test.css" rel="stylesheet" type="text/css" /></head><div class="demo">1</div><div class="demo2">2</div><div class="demo3">3</div><div class="demo4">4</div></html>

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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.