img

px转rem

2021-07-14 0条评论 2.7k次阅读 CSS


1.安装三个包

  "devDependencies": {
    "lib-flexible": "^0.3.2",
    "postcss-pxtorem": "^5.1.1",
    "px2rem-loader": "^0.1.9"
  }

2.vue.config.js 加入以下代码

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    // 把px单位换算成rem单位
                    require('postcss-pxtorem')({
                        rootValue: 75, // 换算的基数(设计图750的根字体为32)  75 => 750 设计稿
                        selectorBlackList: ['.van'], // 要忽略的选择器并保留为px。
                        propList: ['*'], //可以从px更改为rem的属性。
                        minPixelValue: 2, // 设置要替换的最小像素值。
                    }),
                ],
            },
        },
    },
}

3. 在mian.js引入文件

import 'lib-flexible/flexible';

完成!

💬 COMMENT


🦄 支持markdown语法

👋友