前端实现项目中px自动转换rem

“好事”文章：《掌握微信小程序开发的核心要点：从基础到进阶》

文章地址：https://cloud.tencent.com/developer/article/2472716

好文介绍：好文通过5个核心要点，讲解了如何掌握微信小程序开发从基础到进阶。

实现项目中px自动转换rem

使用 CSS 预处理器（以 Sass 为例）

1. 基本原理

Sass 是一款强大的 CSS 预处理器，它允许开发者使用变量、函数、嵌套规则等特性来更高效地编写 CSS 样式。通过定义一个函数来实现 px 到 rem 的转换，在编写样式时调用该函数，就能自动将 px 值转换为 rem 值。rem 单位是相对于根元素（html 元素）的字体大小进行计算的，所以需要先确定根元素的字体大小。

2. 具体步骤

• 步骤一：定义根元素字体大小变量undefined在项目的全局 Sass 文件（例如 styles.scss）开头，定义一个表示根元素字体大小的变量，通常浏览器默认根元素字体大小是 16px，你可以根据实际设计稿进行调整，示例代码如下：

$base-font-size: 16px;

• 步骤二：创建 px 转 rem 的函数undefined接着创建一个函数，用于执行 px 到 rem 的转换计算。函数接收一个表示 px 值的参数，然后将其除以根元素字体大小变量，再乘以 1rem，返回对应的 rem 值，代码如下：

@function px-to-rem($px) {
    @return $px / $base-font-size * 1rem;
}

• 步骤三：使用函数编写样式undefined在后续编写具体的样式规则时，使用 px-to-rem 函数来替代直接写 px 值。例如，给一个类名为 .box 的元素设置宽度为 300px，高度为 200px，代码如下：

.box {
    width: px-to-rem(300);
    height: px-to-rem(200);
}

当使用 Sass 编译器将 .styles.scss 文件编译成普通的 CSS 文件时，上述代码会被转换为对应的 rem 值表示的样式，如下所示（假设 $base-font-size 为 16px）：

.box {
    width: 18.75rem;
    height: 12.5rem;
}

使用 PostCSS 插件（以 postcss-pxtorem 为例）

1. 基本原理

PostCSS 是一个用 JavaScript 编写的 CSS 处理工具，它可以通过各种插件来对 CSS 代码进行转换、优化等操作。postcss-pxtorem 插件能够自动分析 CSS 文件中的 px 值，并依据配置的根元素字体大小以及其他相关参数，将 px 值转换为 rem 值，这个转换过程在项目构建时自动完成，开发者无需手动干预每个 px 值的转换。

2. 具体步骤

• 步骤一：安装依赖undefined首先确保你的项目已经安装了 PostCSS（如果没有安装，可以通过 npm install postcss -g 命令全局安装，或者在项目内使用 npm install postcss --save-dev 命令安装到开发依赖中），然后安装 postcss-pxtorem 插件，执行 npm install postcss-pxtorem --save-dev 命令。
• 步骤二：配置插件undefined在项目根目录下创建一个 postcss.config.js 文件（如果已经存在则直接编辑它），在该文件中配置 postcss-pxtorem 插件，以下是一个常见的配置示例：

module.exports = {
    plugins: [
        require('postcss-pxtorem')({
            rootValue: 16, // 换算基数，默认100，把根标签的font-size规定为1rem为50px,在设计稿上量出多少px直接在代码中写多少px
            unitPrecision: 5, // rem值的小数保留位数，可根据精度需求设置
            propList: ['*'], // 要转换的属性列表，'*'表示对所有属性中的px值都进行转换，也可以指定具体属性，如['width', 'height']等
            selectorBlackList: [], // 忽略不进行转换的选择器，例如['.no-rem']表示类名为.no-rem的元素内的px值不转换
            replace: true, // 是否替换原有的px值
            mediaQuery: false, // 是否在媒体查询中也进行转换
            minPixelValue: 12, // 小于这个值的px单位将不进行转换
            propBlackList: ['font-size'] // 属性黑名单
        })
    ]
};

• 步骤三：结合构建工具使用（以 Webpack 为例）undefined如果你的前端项目使用 Webpack 作为构建工具，需要在 Webpack 的配置文件（webpack.config.js）中确保启用了 PostCSS 来处理 CSS 文件。示例配置如下（这是一个简化的配置片段，实际应用中可能需要根据项目具体情况调整其他参数）：

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader' // 启用PostCSS来处理CSS文件，使其能应用postcss-pxtorem插件的转换功能
                ]
            }
        ]
    }
};

经过这样的配置后，在编写 CSS 样式时正常使用 px 值，在项目构建过程中，postcss-pxtorem 插件就会按照配置自动将相应的 px 值转换为 rem 值了。

使用前端框架自带的配置功能（以 Vue CLI 为例）

1. 基本原理

Vue CLI 是用于快速搭建 Vue.js 项目的脚手架工具，它提供了一些内置的配置选项，可以方便地实现 px 到 rem 的自动转换。通过在项目配置文件中设置相关参数，Vue CLI 会在构建项目时调用相应的转换逻辑来处理样式中的 px 值。

2. 具体步骤

• 步骤一：创建或编辑 Vue CLI 项目配置文件undefined在 Vue CLI 项目的根目录下，找到 vue.config.js 文件（如果没有则创建一个），这个文件用于对项目进行额外的配置。
• 步骤二：配置 px 转 rem 的相关参数undefined在 vue.config.js 文件中添加如下配置代码，示例如下（这里同样假设根元素字体大小设置为 16px，你可以根据实际情况调整）：

module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 16,
                        unitPrecision: 5,
                        propList: ['*'],
                        selectorBlackList: [],
                        replace: true,
                        mediaQuery: false,
                        minPixelValue: 0
                    })
                ]
            }
        }
    }
};

通过这样的配置，在 Vue.js 项目中编写 CSS 样式时使用的 px 值就会在项目构建阶段自动转换为 rem 值了。

无论选择哪种方法，实现 px 自动转换为 rem 都有助于在前端项目中更方便地进行响应式布局和适配不同屏幕尺寸的设备，大家可以根据项目所采用的技术栈以及个人偏好等来选择最适合的实现方式。我们项目中使用的是第二种PostCSS插件:postcss.config.js 

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('xxxx') !== -1 ? 50 : 100;
      },
      propList: ['*'],
      selectorBlackList: ['xxxx'],
    },
  },
};

未完待续，持续更新中...

感谢关注点赞评论~