大屏可视化页面或者前端页面如何快速适配？？

适配思路

使用css3的新特性transforml来实现，transform有旋转rotate，缩放 scale，倾斜 skew，平移 translate。这里我们需要用到的就是transform的缩放 scale

实现方法

首先我们想要那一块标签或者div适配我们严格给定一个设计稿的宽高尺寸。然后我们再去计算一下放大或者缩小的倍数

这里因为需要适配的屏幕都不一样，所以这里缩放值scale是一个变量，不能是固定值，这样就需要我们在进入页面的时候就需要计算一下这个缩放值

然后在这个页面的created或者mounted生命周期执行该函数即可

然后献上效果图

这是标准情况下

这是不标准的情况下

手机端也适配

最后上代码

这里只上了适配的关键代码，其他视图效果代码不做展示

#bodbox{
    width: 1920px;
    height: 1080px;
    position: relative;
    transform: scale(var(--scale)) !important;
    transform-origin: left top;
    background-image: url('@/assets/image/backgroundImg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

<template>
  <div id="bodbox" :style="{'--scale':scale}">
    <div class="header">
    </div>
  </div>
<template>

data() {
    return {
        scale:1
    }
}
created() {
    this.flgScale()
},
methods: {
    flgScale(){
        console.log(window,22222);
        this.scale = window.innerWidth/1920
        window.onresize = () => {
            this.scale = window.innerWidth/1920
        }
    }
},

此文章仅作参考和本人工作中发现的问题记录，如有其他问题欢迎指出