關於 vue-cli 使用 postcss-px-to-viewport 使移動端自適應

以前 使用 amfe-flexible 配置可伸縮佈局方案 ： 配置連接點擊此處

做者在github上說：

 因爲viewport單位獲得衆多瀏覽器的兼容，lib-flexible這個過渡方案已經能夠放棄使用，無論是如今的版本仍是之前的版本，都存有必定的問題。建議你們開始使用viewport來替代此方。

而後就找到了  postcss-px-to-viewport 插件 用於單位的換算 

 

一、插件的安裝 

npm install postcss-px-to-viewport --save-dev && yarn add -D postcss-px-to-viewport

　

二、在 vue.config.js 中配置參數

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px",	//須要轉換的單位，默認爲"px"
            viewportWidth: 750,   // 視窗的寬度，對應的是咱們設計稿的寬度，通常是750
            unitPrecision: 3,		//單位轉換後保留的精度
            propList: [		//能轉化爲vw的屬性列表
              "*"
            ],
            viewportUnit: "vw",		// 但願使用的視口單位
            fontViewportUnit: "vw",		//字體使用的視口單位
            selectorBlackList: [],	//須要忽略的CSS選擇器，不會轉爲視口單位，使用原有的px等單位。
            minPixelValue: 1,		//設置最小的轉換數值，若是爲1的話，只有大於1的值會被轉換
            mediaQuery: false,		//媒體查詢裏的單位是否須要轉換單位
            replace: true,		//是否直接更換屬性值，而不添加備用屬性
            exclude: /(\/|\\)(node_modules)(\/|\\)/,		//忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
          })
        ]
      }
    }
  }
}