开发语言：Vue + Echarts
主要是解决界面缩放情况，大屏内容自适应的问题

大屏适配比例一般有

16:9（1920*1080）
16:9（3840*2160）
16:10（1920*1200）
21:9（3440*1440）

一般设计稿的比例是1920*1080，就是16:9。

解决方法：适合于适配不同比例，可以采用vm、vh，在屏幕缩放时有自适应的效果

编辑mixins.less

// 路径：src/style/mixins.less
// 默认宽度
@width: 1920;
// 默认高度
@height: 1080;.pxToVH (@px, @attr: height) {@vh: (@px / @height * 100);@{attr}: ~"@{vh}100vh";
}.pxToVW (@px, @attr: width) {@vw: (@px / @width * 100);@{attr}: ~"@{vw}vw";
}

编辑vite.config.js

使用的是vue2

import vue2 from '@vitejs/plugin-vue2';
import vueJsx from '@vitejs/plugin-vue2-jsx';
import { resolve } from 'path';
import { defineConfig, loadEnv } from 'vite';
import commonjs from 'vite-plugin-commonjs';
import {createHtmlPlugin} from 'vite-plugin-html';export default ({mode}) => {const {VITE_PORT, VITE_BASE_URL, VITE_PROXY, VITE_PROXY_DOMAIN} = loadEnv(mode, process.cwd());return defineConfig({resolve: {alias: {'@': resolve(__dirname, 'src'),},},css: {preprocessorOptions: {less: {globalVars: {hack: `true; @import '@/style/mixins.less'`,},math: 'strict',javascriptEnabled: true,},},},};

使用

  .box-content {.pxToVW(15, padding-left);.pxToVW(15, padding-right);.pxToVH(43, height);.pxToVH(43, line-height);}