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

之前喜歡用lib-flexible配合px2rem達到移動端適配的效果， 
最近了解了下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端出現字體過大等現象，需酌情處理，根據應用場景自行選擇 
vue-cli3.0引入lib-flexible/px2rem

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