大屏适配方案二——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';
};

使用：

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

3）第三方插件的处理如：element、antd
4）地图插件处理

参考：一次搞懂数据大屏适配方案 (vw vh、rem、scale)