1.使用vw和vh单位

将全屏盒子的宽高分别设为100vw和100vh，将px按比例计算转为vw和vh。也可自己封装css和js，自定义公共转换函数计算。

优点：可以动态计算图表宽高，字体等，灵活度较高。且不会出现四周留白情况。
缺点：计算麻烦。需要编写自定义转换函数，为每个图表都单独做字体、间距、位移的适配。

2.使用css3的transform属性scale

通过固定定位和js计算比例，实现大屏数据根据屏幕尺寸动态放大缩小，保持原型稿设计比例。也是主流适配方案，可直接引入第三方组件vue2/3-scale-box。

vue2版本：www.npmjs.com/package/vue…
vue3版本：www.npmjs.com/package/vue…

实现原理： 将全屏盒子宽高直接设置为100vw和100vh，背景图铺满。开启固定定位，将left和right设置为50%，并将缩放基点设置为视口左上，确保内容居中显示。Js定义大屏缩放比例，实现动态缩放。

基本代码：

    .container {
        width: 100%;
        height: 100%;
        background: url(...) no-repeat;
        background-size: cover;
    }

    .screen {
        position: fixed;
        width: 1920px;
        height: 1080px;
        left: 50%;
        top: 50%;
        transform-origin: left top;
    }

    let screen=ref();
    onMounted(() => {
        screen.value.style.transform=`scale(${getScale()}) translate(-50%,-50%)`
    })// 设置屏幕元素的transform样式，缩放比例和位置

    //计算大屏缩放比例
    function getScale(w = 1920,h = 1080) {
        const ww = window.innerWidth / w;
        const wh = window.innerHeight / h;
        return ww < wh ? ww : wh;//宽度过大就以高度为基准；高度过大就以宽度为基准。
    }

    //监听视口变化 
    window.onresize = ()=>{
        screen.value.style.transform=`scale(${getScale()}) translate(-50%,-50%)`
    }// 更新屏幕元素的transform样式，重新计算缩放比例和位置

优点：代码量少，适配简单。
缺点：因为是根据原比例等比缩放，所以当视口比例与原比例不同时，上下或两侧会留白。

3.使用rem+vw vh

1.获取rem的基准值。
2.动态计算html根元素的font-size。
3.图表中通过vw vh动态计算字体、间距、位移等。

优点：布局的自适应代码量较少，适配简单。
缺点：因为是根据原比例等比缩放，所以当视口比例与原比例不同时，上下或两侧会留白。且图表需要做单个字体、间距、位移的适配。