echarts 前端 javascript vue3大屏适配之常见方案

1.rem 单位 + 动态设置 html 的 font-size(不推荐)

如将设计稿的宽(1920)平均分成 24 等份，每一份为 80px。

动态设置 html 的 font-size可以使用媒体查询或者js来动态改变body的fontsize大小，媒体查询太麻烦，以下是通过js代码动态改变fontsize大小。

缺点：一些第三方库的字体等默认的都是px单位，比如：element、echarts，因此通常需要层叠第三方库的样式，比如有的图表需要单独适配字体。

2.vw/vh

使用vw、vh适配的优点是可以根据屏幕大小自动调整元素大小，使得页面在不同设备上都能够呈现出较好的效果。直接是响应式的，不需要resize事件，

缺点：一些第三方库的字体等默认的都是px单位，比如：element、echarts，因此通常需要层叠第三方库的样式，比如有的图表需要单独适配字体。像素较小的情况下不精准。

3.scale(推荐)

直接根据宽度的比率进行缩放。（宽度比率=网页当前宽 / 设计稿宽）

夸智网