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(推荐)

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





你可能感兴趣的:(echarts,前端,javascript)