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

安裝
命令行輸入：

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