uniapp小程序如何使用postcss-pxtorem插件

在uniapp开发小程序时，想使用postcss-pxtorem插件实现px自动转rem，但按照官方文档配置后不生效。请问具体需要在哪个配置文件中修改？是否需要额外安装依赖？转换规则应该如何设置才能适配小程序屏幕？求完整的配置示例和注意事项。

2 回复

在uniapp项目中，安装postcss-pxtorem插件后，在根目录创建postcss.config.js文件，配置如下：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16,
      propList: ['*'],
      selectorBlackList: []
    }
  }
}

rootValue根据设计稿调整，如设计稿750px，可设为75。


在 UniApp 小程序中使用 postcss-pxtorem 插件，可以自动将 CSS 中的像素单位（px）转换为 rem 单位，实现响应式布局。以下是详细步骤：

1. 安装依赖

在项目根目录运行命令安装插件：

npm install postcss-pxtorem --save-dev

2. 配置 PostCSS

在项目根目录创建或修改 postcss.config.js 文件，添加以下配置：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 基准值，1rem = 16px（根据设计稿调整，如设计稿为750px宽，可设为75）
      propList: ['*'], // 转换所有属性的px单位
      exclude: /node_modules/i // 排除node_modules目录
    }
  }
}

3. 设置页面根字体大小

在 App.vue 的 <script> 标签中添加代码，动态设置根字体大小：

export default {
  onLaunch() {
    // 根据屏幕宽度调整基准值（以750px设计稿为例）
    const docEl = document.documentElement
    const resize = () => {
      const clientWidth = docEl.clientWidth
      if (!clientWidth) return
      docEl.style.fontSize = (clientWidth / 750) * 16 + 'px' // 调整16为你的基准值
    }
    resize()
    window.addEventListener('resize', resize)
  }
}

注意事项：

  1. 设计稿适配：若设计稿宽度为750px，建议设置 rootValue: 75，则设计稿中100px直接写100px，转换后为1rem。
  2. 忽略转换：对不需要转换的样式可写成大写 PX，如 border: 1PX solid #ccc。
  3. H5 适配：此配置主要适用于 H5 端，小程序端部分组件样式可能需单独处理。

完成配置后，编写样式时直接使用 px 单位，编译时将自动转换为 rem。

回到顶部