大屏适配方案二—

大屏适配方案二——vw和vh

按照设计稿的尺寸，将px按比例计算转为vw和vh，转换公式如下

假设设计稿尺寸为 1920*1080（做之前一定问清楚 ui 设计稿的尺寸）即：
网页宽度=1920px
网页高度=1080px我们都知道
网页宽度=100vw
网页宽度=100vh所以，在 1920px*1080px 的屏幕分辨率下1920px = 100vw
1080px = 100vh这样一来，以一个宽 300px 和 200px 的 div 来说，其所占的宽高，以 vw 和 vh 为单位，计算方式如下:vwDiv = (300px / 1920px ) * 100vw
vhDiv = (200px / 1080px ) * 100vh所以，就在 1920*1080 的屏幕分辨率下，计算出了单个 div 的宽高当屏幕放大或者缩小时，div 还是以 vw 和 vh 作为宽高的，就会自动适应不同分辨率的屏幕

1、新建文件：src/styles/index.less

@charset "utf-8";//默认设计稿的宽度
@designWidth: 1920;
//默认设计稿的高度
@designHeight: 1080;.px2vw(@name, @px) {@{name}: (@px / @designWidth) * 100vw;
}.px2vh(@name, @px) {@{name}: (@px / @designHeight) * 100vh;
}
.px2font(@px) {font-size: (@px / @designWidth) * 100vw;
}.px2margin(@top, @right, @bottom, @left) {margin: (@top / @designHeight) * 100vh (@right / @designWidth) * 100vw (@bottom / @designHeight) * 100vh(@left / @designWidth) * 100vw;
}
.px2padding(@top, @right, @bottom, @left) {padding: (@top / @designHeight) * 100vh (@right / @designWidth) * 100vw (@bottom / @designHeight) * 100vh(@left / @designWidth) * 100vw;
}

2、配置在vite.config.js配置less全局变量

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';export default defineConfig({css: {preprocessorOptions: {less: {javascriptEnabled: true,additionalData: `@import "${path.resolve(__dirname, 'src/styles/index.less')}";`}}}
});

3、在 vue 文件中使用

<template><div class="box">   </div>
</template>
<style lang="less" scoped="scoped">
/* 直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh单位   */
.box{.px2vw(width, 300);.px2vh(height, 100);.px2font(16);.px2vw(margin-left, 300);.px2vh(margin-top, 100);.px2padding(0, 16, 16, 16);background-color: black;
}
</style>

4、特殊情况处理
1）echarts图表字体、间距、位移等尺寸自适应
echarts 的字体大小只支持具体数值（像素），不能用百分比或者 vw 等尺寸，一般字体不会去做自适应，当宽高比跟 ui 稿比例出入太大时，会出现样式问题
封装工具函数：

//给定设计稿的字体大小，计算当前分辨率下，等比例缩放后的字体大小
export const fitSize = (size, defalteWidth = 1920) => {let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;if (!clientWidth) return size;let scale = clientWidth / defalteWidth;return Number((size * scale).toFixed(3));
};

使用：

 var myChart = echarts.init(document.getElementById('left-bottom'));var option = {tooltip: {trigger: 'item',textStyle: {fontSize: fitSize(14)}},legend: {top: '5%',left: 'center',itemWidth: fitSize(25),itemHeight: fitSize(14),textStyle: {color: '#fff',fontSize: fitSize(12)}},series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: fitSize(28),fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]};myChart.setOption(option);

2）定义 js 样式处理函数

// 定义设计稿的宽高
const designWidth = 1920;
const designHeight = 1080;// px转vw
export const px2vw = (_px) => {return (_px * 100.0) / designWidth + 'vw';
};export const px2vh = (_px) => {return (_px * 100.0) / designHeight + 'vh';
};export const px2font = (_px) => {return (_px * 100.0) / designWidth + 'vw';
};

使用：

<divclass="content":style="{ 'font-size': px2font(14) }"
>环境监测环境监测环境监测环境监测
</div>
<el-table:data="tableData"style="width: 100%":height="px2vh(342)"
><el-table-columnprop="name"label="Name":width="fitSize(80)"/><el-table-columnprop="date"label="Date":width="fitSize(120)"/>
</el-table>