前言

在工作中，我们或多或少会接触到大屏可视化的项目，对于大屏可视化的适配，是一大技术点。

可视化适配方案

通过市面上多种方案的对比，最常见也就三种方案，（vh、vw）方案、rem方案以及scale方案。接下来将分别介绍三种方案。

方案	原理	优点	缺点
vh、vw方案	配合postcss-px-to-viewport插件，将设计稿的px值自动转换为vw或者vh。	①灵活性高，只需要将插件的viewportWidth属性配置成设计稿即可。 ②不会出现留白。	①项目中使用echarts图标时，echarts图表中的px值需要根据屏幕宽度动态设置。所以需要手写一个计算比例的函数。 ②行内样式的px值需要自己手动转换。
rem方案	配合postcss-pxtorem插件，将设计稿的px值自动转换为rem，然后再根据屏幕宽度自动设置根html的font-size的大小。	①将postcss-pxtorem的rootValue配置和设计稿一样的即可 ②不会出现留白	①项目中使用echarts图标时，echarts图表中的px值需要根据屏幕宽度动态设置。所以需要手写一个计算比例的函数。 ②行内样式的px值需要自己手动转换。 ③需要手动写一个函数自动设置根html的font-size的值。
scale方案	根据屏幕宽度或者高度，动态设置scale的值	①不用转换px值。 ②不用动态设置echarts中的px值。	①当屏幕宽高比例与设计稿比例不一致时，两侧可能出现留白。