一、設備支持情況

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

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

1、PC端

2、mobile端

二、vw的不足

1、vw和px混用時會溢出

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

2、有些機型不支持

可以采用csspolyfill進行降級處理，推薦Viewport Units Buggyfill

三、vw需知

vw是基于Viewport視窗的長度單位，視窗（Viewport）指的就是瀏覽器可視化的區域，而這個可視區域是window.innerWidth/window.innerHeight的大小。

在CSS Values and Units Module Level 3中和Viewport相關的單位有四個，分別為vw、vh、vmin和vmax。

1、vw

是Viewport's width的簡寫,1vw等于window.innerWidth的1%；
2、vh

是Viewport's height的簡寫，1vh等于window.innerHeihgt的1%；
3、vmin

vmin的值是當前vw和vh中較小的值；
4、vmax

vmax的值是當前vw和vh中較大的值；
5、計算

100vw = 750px，即1vw = 7.5px。

四、vw的使用

1、把px轉化為vw，vh
在代碼中寫px，借助插件postcss-px-to-viewport轉化為vw。
安裝后，進行參數配置

"postcss-px-to-viewport": { viewportWidth: 750, viewportHeight: 1334, unitPrecision: 5, viewportUnit: 'vw', selectorBlackList: [], minPixelValue: 1, mediaQuery: false }

2、容器的長寬比縮放
推薦插件postcss-aspect-ratio-mini。安裝后，直接使用如下，不用配置。

.aspect-box {position: relative; }.aspect-box {aspect-ratio: '16:9'; }

會看到編譯結果

.aspect-box {position: relative; }.aspect-box:before {padding-top: 56.25%; }

3、1px的處理方案
安裝postcss-write-svg插件。
方案A、border-image

@svg 1px-border {height: 2px;@rect {fill: var(--color, black);width: 100%;height: 50%;} } .example {border: 1px solid transparent;border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch; }

會看到編譯結果

.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch; }

方案B、background-image

@svg square { @rect { fill: var(--color, black); width: 100%; height: 100%; } } #example { background: white svg(square param(--color #00b1ff)); }

會看到編譯結果

#example { background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E"); }

?

轉載于:https://www.cnblogs.com/camille666/p/vw_autoadapt.html

總結

以上是生活随笔為你收集整理的vw实现移动端自适应页面的全部內容，希望文章能夠幫你解決所遇到的問題。

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