postcss-px-to-viewport在vue的使用(vw)

在這裏我推薦大家使用vue-cli的方式構建項目

1.通過npm安裝 命令npm install postcss-px-to-viewport --save-dev  

--save-dev這裏我做一下簡單的分享

就是你的項目僅僅實在開發環境下需要的npm包，在上線之後不需要就是用--save-dev，如果你的項目在上線之後

依賴的包就使用--save  安裝

2安裝完成之後，我們在bulid/vue-loader.conf.js

在這一塊代碼裏裏面加上

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction,
  }),

usePostcss:true

3。第三步就是配置，一般來說我們看做移動端都會已某一款手機爲基準，進行開發

比如，在這裏，我就是以iphone5爲基準來開發的，現在我們使用vue-cli的創建的項目，在根目錄下都會有postcssrc.js這個js

我們需要配置的東西，就寫在這個裏面

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

這個就是以iphone5爲基準的配置信息，如果是已其他來配置的，改一下參數就行了，給大家分享一下這個配置的基本信息，大家想仔細瞭解的可以去這個網址訪問點擊打開鏈接