自适应布局方案.

现有的桌面web项目需要给大屏展示用，可能会遇到大分辨率导致显示不清晰的问题，下面是解决方案思考和选择。

方案

无效方案

使用rem组合换算可以解决问题，有几个问题

原因有：

1. 懒，不想计算换算系数。
2. 代码不够整洁。
3. px值需要全局替换，但有些属性或者类选择器我不想进行转换。

有效方案选择

• lib-flexible+postcss-pxtorem
• postcss-px-to-viewport

方案一

从我个人来说，我认为它主要有以下两个不足：

1. 两个插件需要配套使用，而且rootValue设置的值不好理解
2. rem是相对于html元素字体单位的一个相对单位，从本质上来说，它属于一个字体单位，用字体单位来布局，并不是太合适

方案二

postcss-px-to-viewport

安装插件

pnpm

$ pnpm i postcss-px-to-viewport --save-dev

or yarn

$ yarn add -D postcss-px-to-viewport

添加配置文件

只需添加viewportWidth和fontViewportUnit参数即可实现

// https://vitejs.dev/config/

参考 移动端布局之postcss-px-to-viewport（兼容vant）【更新于2021/09/27】 # Rem布局的原理解析