如何快速实现响应式多屏幕适配

项目涉及的场景比较简单，所以我个人的配置也比较粗糙简单，如果要对于更详细的多端适配，可能需要更细致的设定，如果希望一键快速实现大体上过得去的pc端多端适配，可以用这个法子。

1. 安装postcss(必须)+tailwindcss(可选)
2. 安装postcss-plugin-px2rem(必须)
3. 在豆包搜索postcss-plugin-px2rem如何配置应用在postcss.config.js文件里面按需配置（关键）

module.exports = {
  plugins: [
    require('postcss-plugin-px2rem')({
      rootValue: 16, // 根元素字体大小（默认 16px，即 1rem = 16px）
      unitPrecision: 5, // 转换后的 rem 保留小数位数（默认 5）
      propList: ['*'], // 需要转换的 CSS 属性（默认 ['*']，即所有属性）
      selectorBlackList: [], // 不转换的选择器（如 ['body']，则 body 下的 px 不转换）
      replace: true, // 是否直接替换原 px 值（默认 true，不保留原 px）
      mediaQuery: false, // 是否转换媒体查询中的 px（默认 false，不转换）
      minPixelValue: 0, // 最小转换像素值（默认 0，即所有 px 都转换）
      exclude: /node_modules/i // 排除的文件路径（如 node_modules 下的样式不转换）
    })
  ]
}

后续需要详细配置的话，需要关注的两个属性

selectorBlackList: [], 
mediaQuery: false, 

4. 计算出基准线

因为我们项目主流的屏幕大小是1920px，最大是2540px，最小是1280px，希望尽可能一套css代码实现复用，再使用media媒体查询去进行特殊处理。

所以希望1920px下1rem是16px，其他环境下，最大的fontSize不超过20px，最小不低于12px，于是：

1920/16 === 120

120*20 = 2400（最大屏幕宽度，超过则取2400px）

120*12 = 1200（最小屏幕宽度，低于则取1400px）

如果设备屏幕宽度在1400px-2400px，则取 fontSize = 当前屏幕宽度/120，不然当前屏幕宽度则按照MAX_DEVICESIZE和MIN_DEVICESIZE计算。