按照设计稿的尺寸，将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）地图插件处理