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以上。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
