背景
在做大屏可视化项目的时候，一般设计稿会设计成1920*1080，但是页面写死1920*1080在2k、4k等分辨率的屏幕下是不适配的。如果页面能够根据屏幕比例进行等比缩放那就好了。
比例
什么？不知道屏幕比例？其实我们常见的1920*1080（1080P）、2k、4k...都是16：9的比例，在做项目之前我们需要搞清楚客户的数据可视化平台需要在什么屏幕下展示，确定了实际屏幕比例，按照实际屏幕比例选择一个设计稿尺寸进行设计，设计稿出来后前端严格按照设计稿px进行开发页面即可（前提是按照下列适应方案进行开发）下列适应方案能够适应同比例下的所有分辨率屏幕。
方案
提到等比缩放，第一反应就是css3的缩放属性；其实“阿里DataV”与“腾讯云图”两个大厂的数据可视化项目对大屏数据可视化的适应方案均采用css3的transform：scale进行等比缩放实现的，这种方案目前也被很多人在使用，个人在实际项目中也采用的这种方案。
实际应用
使用 scale-box 组件，vue2与vue3都支持，使用非常简单，引入之后组件内所有内容都会按照设置的宽高比例进行缩放，还有屏幕缩放防抖优化
vue2版本（npm官网）：https://www.npmjs.com/package/vue2-scale-box
vue3版本（npm官网）：https://www.npmjs.com/package/vue3-scale-box
也适用于项目开发完成后发现需要做适配，引入组件包裹项目根节点即可。文章来源：https://www.toymoban.com/news/detail-519887.html
属性：文章来源地址https://www.toymoban.com/news/detail-519887.html
-
width宽度 默认1920 -
height高度 默认1080 -
bgc背景颜色 默认"transparent" -
delay自适应缩放防抖延迟时间（ms） 默认100 -
@scaleChange缩放值发生改变的方法 可动态获取 scale 改变后的值
到了这里，关于vue大屏可视化自适应完美方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
