vue/cli3.0配置px轉rem,vw/vh

項目又在vue/cli3.0作移動端，像配置一下px轉rem,以及vw。方便項目的開發，記錄一下配置的內容，下面就是配置內容：

1.使用pxtorem px轉成rem

npm install lib-flexible 或者 yarn add lib-flexible 

讓網頁根據設備dpr和寬度，利用viewport和html根元素的font-size配合rem來適配不一樣尺寸的移動端設備

在main.js引入中：import 'lib-flexible/flexible.js'

1.1  npm install postcss-pxtorem 或者 yarn add postcss-pxtorem

在package.json內，在postcss內添加：

"postcss": {
   "plugins": {
    "autoprefixer": {},
    "postcss-pxtorem": {
           "rootValue": 75, // 設計稿寬度的1/10,（JSON文件中不加註釋，此行註釋及下行註釋均刪除）

           "selectorBlackList": [ "vant" ],//忽略轉rem項，列表中不進行轉rem

           "propList":["*"] // 須要作轉化處理的屬性，如`hight`、`width`、`margin`等，`*`表示所有
        }
    }
},

1.2  或者使用 npm install --save-dev postcss-loader postcss-px2rem

 

在vue.config.js中配置

module.exports = {
        css: {
        loaderOptions: {
               css: {
                       // options here will be passed to css-loader
               },
         postcss: {
                    // options here will be passed to postcss-loader
                    plugins: [require('postcss-px2rem')({
                              remUnit: 75
                    })]
               }
          }
      }
}

 

2.使用 postcss-px-to-viewport  注意：移動端用方便，不過在pc端會出新字體過大的現象

npm install  postcss-px-to-viewport 或者 yarn add  postcss-px-to-viewport 

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

 

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