项目涉及的场景比较简单，所以我个人的配置也比较粗糙简单，如果要对于更详细的多端适配，可能需要更细致的设定，如果希望一键快速实现大体上过得去的pc端多端适配，可以用这个法子。
- 安装postcss(必须)+tailwindcss(可选)
- 安装postcss-plugin-px2rem(必须)
在豆包搜索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,
- 计算出基准线
因为我们项目主流的屏幕大小是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计算。
更加详细的多屏幕适配方案
-
视口(viewport)配置
（1）device-width 设备屏幕宽度 （2）initial-width 初始缩放比例 1：1
-
Box-sizing:border-box 设置为IE盒模型width=padding+真实宽度
-
normalize.css基础样式重置，postcss-preset-env/autoprefixer(处理浏览器前缀)+tailwindcss的preflight(基础样式重置)统一浏览器差异
Q: 为什么重置？
A: 不同浏览器有自己的默认样式，而这可能导致Chrome显示正常，但是别的浏览器布局显示不正常
- flex布局+vw/vh或rem实现自适应
- 断点设计：盲目断点不可取
断点优先业内主流屏幕大小：
- 640px 主流小屏手机大小
- 768px 主流平板/大屏手机大小
- 1024px 笔记本大小
- 1280px 部分笔记本大小
- 1540px 部分大屏笔记本
- 1920px 大屏
- 2560px 超大屏
业内优先小屏然后再调整到大屏上，但因为我的项目主要是1920px的屏幕，只有部分在2560px以及很少人在1280px，所以项目以1920px作为基准调准
- 组件适配，对于部分屏幕大小跨度太大的情况，可以在pc端走一个文件，移动端走一个vue文件，通过判断当前屏幕宽度，选择渲染不同组件
- css Module和scoped进行不同组件css文件隔离，编译生成唯一的hash名称+文件名进行数据隔离
- 使用tailwindcss，使用rem为单位
- 以及以上的px-to-rem的方法和根px设置
如果实现7.5px大小的fontsize，使用transform:scale缩放字体，先设置整数像素15px然后缩放0.5倍
