vue-cli3.0項目中使用vw——相比flexible更原生的移動端解決方案

親測，對於vue3.x來講，適配最好

vw 與 vh單位，以viewport爲基準，1vw 與 1vh分別爲window.innerWidth 與 window.innerHeight的百分之一。

安裝
命令行輸入：

yarn add postcss-px-to-viewport

或

npm i postcss-px-to-viewport -save -dev

配置
package.json中，在postcss中添加代碼：

"postcss": {
    "plugins": {
        "autoprefixer": {},
        "postcss-px-to-viewport": {
            "viewportWidth": 750,
            "minPixelValue": 1
        }
    }
},

配置項：

"viewportWidth": 750,   // 設計稿的寬度  
"unitPrecision": 3,     // px轉成vw、vh後小數點保留的位數 
"minPixelValue": 1,     // 不轉化爲vw的最小px值

使用場景
vw與vh會在pc與移動端均產生效果，而不像flexible只會轉換必定寬度（記得是750px）如下設備的px爲rem，所以若設計稿爲移動端而生，全權使用vw單位會使得頁面在pc端出現字體過大等現象，需酌情處理，根據應用場景自行選擇

兼容性
vw/vh 單位其實出現比較早了，只是之前支持性不太好，如今隨着瀏覽器的發展，大部分（92%以上）的瀏覽器已經支持了vw/vh，