首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ CSS / 文章详情

px转rem

Sonder
2021-07-14
761字
2分钟
浏览 (2.8k)

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';

完成!

下一篇 / CSS 文字向前滚动轮播

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)