h5在移动端适配 px自动转rem

最新推荐文章于 2025-10-02 15:59:36 发布

原创

最新推荐文章于 2025-10-02 15:59:36 发布 · 7.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了如何在项目中利用postcss-px2rem插件将CSS中的px单位自动转换为rem，以实现移动端屏幕适配。通过安装指定版本的插件，配置postcss.config.js或vue.config.js，并设置根元素的font-size，可以轻松完成转换。同时提醒在遇到PostCSS版本不匹配问题时，可以暂时回退到@5.1.1版本。

在项目中为了屏幕适配，经常会用到rem，postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件

1. 安装：npm i postcss-px2rem --save -dev

2.根目录下新建postcss.config.js(注：之前使用的 .postcssrc.js 已经被抛弃)

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5
      propList: ['*'], // Use wildcard * to enable all properties
      selectorBlackList: ['.norem'], // ignore and leave as px
	  exclude: /node_modules/ 
    }
  }
};

remUnit: 37.5 代表 1rem = 37.5px; 所以当你一个75px值时，它会自动转成 (75px/37.5)rem,

转化完之后，你还需要在根元素设置他的font-size,因为rem是相对根元素来设置大小的