postcss-pxtorem插件理解与使用

常用的H5网页适配方案，Rem算是非常好用的一个了。就连uniapp也是在底层写好了rpx单位来实现的多设备适配，原理等同rem。

什么是Rem

• rem（font size of the root element）是指相对于根元素html的字体大小的单位。
  简单的说它就是一个相对单位。设置 html 的 font-size 属性，rem 是根据它的大小来动态变化整个项目中使用 rem 单位的元素大小。
• 如果根元素（即HTML元素）元素的字体大小是 16px，那么 1rem 就等于 16px。如果 HTML 元素的字体大小改变，那么使用 rem 作为单位的元素的大小也会相应地改变。

postcss-pxtorem
项目地址
postcss-pxtorem是一个PostCSS插件
用于将CSS中的像素值转换为rem单位,以实现响应式布局和适配不同屏幕尺寸的需求

安装
$ npm install postcss-pxtorem

设置
vite.config.js

import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 37.5, // 75表示750设计稿，37.5表示375设计稿
          propList: ["*"], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ["norem"], // 过滤掉norem-开头的class，不进行rem转换
        }),
      ],
    },
  },
});