vue3 数据大屏实现屏幕自适应 px转rem

vue yekong 835℃

安装依赖

pnpm i amfe-flexible autoprefixer postcss postcss-loader postcss-pxtorem

引入amfe-flexible

main.js 引入 amfe-flexible

import 'amfe-flexible'

创建配置文件 postcss.config.cjs

根目录创建postcss.config.cjs

module.exports = {
    plugins: {
        autoprefixer: {},
        // flexible配置
        "postcss-pxtorem": {
            "rootValue": 192,// 设计稿宽度或者目前正常分辨率的1/10
            selectorBlackList: [".ivu"],// 要忽略的选择器并保留为px。
            minPixelValue: 2,// 设置要替换的最小像素值。
            "propList": [
                "*"
            ]// 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
        }
    }
}


运行效果

运行效果

vue3 vite postcss-pxtorem排除指定目录node_modules

喜欢 (1)