CSS中通過設置元素的寬度來調(diào)整元素的大小。而有些時候,我們需要讓元素的寬度和瀏覽器窗口的寬度保持一致。這時,我們可以使用CSS3中的Viewport單位——vw。
html,body{ width:100%; height:100%; margin:0; padding:0; } .element{ width:100vw; }
在這個例子中,我們將html和body元素的寬度設置為100%以保證它們鋪滿整個瀏覽器窗口。接著給需要鋪滿窗口寬度的元素添加一個100vw的寬度即可實現(xiàn)目標。
另外,如果我們想讓文字的字號隨著窗口大小的變化而變化,可以使用Viewport單位vh。相應的CSS代碼如下:
.element{ font-size:5vh; }
以上就是使用CSS3中Viewport單位vw實現(xiàn)元素寬度等于瀏覽器窗口寬度的方法。