vue3版本实现h5自适应布局

amfe-flexible 和 postcss-pxtorem 可以一起使用来实现移动端的适配效果。

参考的页面地址

vite.config.js配置
import pxtorem from 'postcss-pxtorem';
export default defineConfig({
  plugins: [
    vue()
  ],
  css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 75, // 这里写设计稿的宽度/10即可,例如设计稿宽度是750px就写75
          // vant默认是37.5,如果是使用了vant的话可以像下面这样写
          // rootValue(res) {
          //   return res.file.indexOf("vant") !== -1 ? 37.5 : 75;
          // },
          propList: ['*'], // 需要转换的属性,默认转换所有属性
          selectorBlackList: [] // CSS选择器黑名单,防止部分选择器被转换
          exclude: /\/node_modules\//i, // 忽略包文件转换rem
        })
      ]
    }
  }
});

遇到的问题
解决vue中安装postcss-pxtorem插件,报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”

参考链接

postcss-pxtorem排除特定文件和目录

排除特定页面

点击查看代码
module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-pxtorem": {
            "rootValue": 192,
            selectorBlackList: [".ivu"],
            minPixelValue: 2,
            "propList": ["*"],
            exclude: function(file) {
                // 排除 src/view/home2 目录
                return /src[\\/]view[\\/]home2/.test(file);
            }
        }
    }
}

只转换特定文件

点击查看代码
module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-pxtorem": {
            "rootValue": 192,
            selectorBlackList: [".ivu"],
            minPixelValue: 2,
            "propList": ["*"],
            exclude: function(file) {
                // 排除 不是 src/view/home2 目录的文件
                return !/src[\\/]view[\\/]home2/.test(file);
            }
        }
    }
}

posted @   萤火之森  阅读(182)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示