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,
    },
  },
};

posted @   枫子_dan  阅读(128)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示