tailwindcss px转rem方案

项目场景：

概述：最近在写一个vite框架基于vue3+ts的可视化项目，css框架采用的tailwindcss，适配方案采用 element-resize-detector 适配，该项目做到了百分百适配任何浏览器！

---

问题描述

适配方案element-resize-detector原理：动态获取浏览器的尺寸,在与设计稿(项目设计稿为：1920*1080)进行换算然后进行等比缩放

问题：开发过程中发现图片及问题等比例缩放展示效果欠佳,开始考虑tailwindcss适配方案;

方案采用pxtorem：尝试了绝大多数tailwindcss插件，效果最好的是postcss-pxtorem

注：如果Tailwindcss是通过官网安装的，已经内置了postcss，只需要装 postcss-pxtorem即可

    npm install -D postcss-pxtorem

    yarn add postcss-pxtorem

    pnpm install -D postcss-pxtorem

postcss.config.js 配置 postcss-pxtorem

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 16, // (Number | Function) 表示根元素字体大小或根据input参数返回根元素字体大小
      unitPrecision: 5, // （数字）允许 REM 单位增长到的十进制数字
      propList: ['*'], // 可以从 px 更改为 rem 的属性 使用通配符*启用所有属性
      selectorBlackList: [],// （数组）要忽略并保留为 px 的选择器。
      replace: true, // 替换包含 rems 的规则，而不是添加回退。
      minPixelValue: 0, // 最小的转化单位
      exclude: /node_modules/i // 要忽略并保留为 px 的文件路径
    }
  },
}

我项目中用的  "postcss-pxtorem": "^6.0.0" ，装好重启项目，就可以了