vue-移动端开发-样式适配方案

样式适配

场景：一个项目中既包含了web端也包含了移动端的页面，web端的一些样式不能在移动端正常显示

解决方式：

npm i postcss-px-to-viewport

项目目录下postcss.config.js

module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      unitToConvert: "px",
      viewportWidth: 750,
      unitPrecision: 3,
      propList: ["*"],
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: [".web-main", ".web-chat-list", ".web-msg"],
      // 黑名单，不用转换以适配移动端的样式，按照每个vue页面中的scope来的
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [],
      landscape: false,
      landscapeUnit: "vw",
      landscapeWidth: 568,
    },
  },
};