后台管理系统中的可视化大屏适配方案怎么做?

在一个vue结合element的后台管理系统中新加了一张大屏,设计稿是19201080的尺寸,要适配到38402160、1920*1080等各个分辨率的设备上,请问要怎么做呀?

postcss

1.百分比+rem布局
当前页面的总宽度为100%
测量出每个模块占用屏幕的百分比,设置给对应的模块
文字、边距、图标可以使用rem去做
https://www.jianshu.com/p/281fee833c92
2.使用插件
https://blog.csdn.net/weixin_44692055/article/details/125171949

用弹性布局 flex 高度用 vh 来试试

flex+min-height+min-width+overflow
在不考虑组件在不同分辨率下的大小的话我一般是用这套方法来做

可以使用flexible ,transform 等维持等比例缩放

1、使用 transform
2、将 px 转化为 rem
3、使用 zoom

1、百分比布局, 使用 vw单位, 按设计稿尺寸等比换算字体大小 、间距等
2、使用media,特事特办

1.大屏是现代提出的 因此对应的是现代浏览器! 可以用flex 进行布局
2. a.居中 旁边留白
3.通过 css3 属性 transform: scale(x) 进行比例缩放
4.根据特定屏幕进行适配

在这里插入图片描述