Vue3 可视化大屏自适应解决方案（transform）

自适应一直就是都是前端开发的大难题，特别是现在越来越多的项目喜欢大屏展示，今天公司给我的项目便是一个可视化大屏的项目，而且宽高只告诉了大概是4000*2000，然后使用的Vue3进行开发，网上找了一下几乎都是Vue2的解决过程，所以小小的记录一下，希望能对读者带来帮助。

更多技术问题，欢迎加入小白前端交流群——引导Q：481822994

我很多讲解都是在注释里面，大家可以仔细看看，不难理解，可以直接取过去使用（自己定义初始化的宽高即可）

1.设置基础数据

根据你现在浏览器可视界面设置为基础大小

<template>
  <div class="home" ref="homeref">
  	//内容
  </div>
</template>

对最外层div设置class和定义ref，进行定义样式（这里样式只取了为完成自适应功能的样式）
PS:根据你现在浏览器正常情况下的可视宽高进行定义宽高

.home {
		//！自定义内容！
    width: 1920px;
    height: 919px;
    }

2.获取当前宽高和缩放比例并进行设置

其实我的代码里面注释已经写的很详细了，其中有两处表明【//！自定义内容！】是自己定义的初始宽高需要进行改变，其他的可以【直接拿去使用】

//HTML部分
<template>
  <div class="home" ref="homeref">
  	//内容
  </div>
</template>
//
//js部分
//引入onMounted 
import { onMounted } from 'vue'

//以下为setup内容
setup() {
	//用于使用ref获取dom元素
	const homeref = ref(null)
	const Specifications = reactive({
		//定义的宽高比例，初始为1
		ww: 1,
		wh: 1,
		//根据class="home"里面定义的宽高进行作为初始宽高进行计算
		//！自定义内容！
		width: 1920,
		height: 919,
		//！自定义内容！
	})
	//将方法定义在响应式对象里面使得代码整洁一些
	const method = reactive({
		getScale() {
			// 获取到缩放比例
			Specifications.wh = window.innerHeight / Specifications.height
			Specifications.ww = window.innerWidth / Specifications.width
			//将比例设置进dom元素中
			homeref._value.style.setProperty('--scaleX', Specifications.ww)
			homeref._value.style.setProperty('--scaleY', Specifications.wh)
		},
	})
	onMounted(() => {
		//调用getScale()方法
		method.getScale()
	})
	return {
        homeref,
        ...toRefs(method),
	}
}
//
//</style>部分
<style scoped>
  @import './index.scss';
  .home {
  	//！自定义内容！
    width: 1920px;
    height: 919px;
    //！自定义内容！
    //缩放设置
    transform: scale(var(--scaleX), var(--scaleY));
    transform-origin: 0 0;
    left: 50%;
    top: 50%;
    transition: 0.3s;
</style>

然后我们就可以进行测试在不同比例下是否能够自适应进行缩放改变

3.页面内容定义

外层框架进行了自定义的缩放，里面的内容根据你浏览器视图界面进行正常的开发即可，当然在开发的过程中尽量使用flex布局以及使用px或者%进行宽高定义。现在目测我的项目是没有问题，解决大屏自适应其实就是在最外层添加缩放，但是在移动端需要再度进行思考去解决。