VUE postcss-px-to-viewport解決PC端適配

安裝 postcss-px-to-viewport

npm install postcss-px-to-viewport -save　　

　　配置 package.json文件

  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px-to-viewport": {
        "viewportWidth": 1920, // 設計稿寬度
        "unitPrecision": 5, // px轉換后的小數保留位數，有時候不能整除
        "minPixelValue": 1 // 小於或等於`1px`時不轉換為視窗單位
      }
    }
  }

　　其他配置可以自行查詢如下列屬性等：

     mediaQuery: false,   // 允許在媒體查詢中轉換，默認為false
    propList: ["*"],   // 轉化為vw的屬性列表
    viewportUnit: "vw",   // 指定轉換的單位
    fontViewportUnit: "vw",   // 字體使用的單位
    selectorBlaskList: [".ignore-"],    // 指定不需要轉換的類
  

　　

 

 postcss-px-to-viewport的缺點

 postcss-px-to-viewport雖然好用，但是卻有一個缺點，就是只對style內的樣式進行轉換，行內樣式沒辦法轉換，我還沒解決，因為我沒寫行內樣式