vw實現移動端自適應頁面

標籤：tar   width   image   一起   strong   裝置   blog   air   idt   

一、裝置支援情況

測試網站：https://caniuse.com/#search=vw

css3test：https://airen.github.io/css3test/，https://github.com/airen/css3test

1、PC端

2、mobile端

二、vw的不足

比如當容器使用vw單位，margin採用px單位時，很容易造成整體寬度超過100vw，從而影響布局效果。對於類似這樣的現象，我們可以採用相關的技術進行規避。比如將margin換成padding，並且配合box-sizing。只不過這不是最佳方案，隨著將來瀏覽器或者應用自身的Webview對calc()函數的支援之後，碰到vw和px混合使用的時候，可以結合calc()函數一起使用，這樣就可以完美的解決。

vw實現移動端自適應頁面