//
* 需保持的比例（默认2）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5
))
//
const baseProportion = 2
const calcRate = () =>
{
//
当前宽高比
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5
))
if
(fill){//是否满屏拉伸
scale.width
= (window.innerWidth /
baseWidth)
scale.height
= (window.innerHeight /
baseHeight)
appRef.style.transform
= `scale(${scale.width}, ${scale.height}) translate(-50%, -50%
)`
return
if
(appRef) {
if
(currentRate >
baseProportion) {
//
表示更宽
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5
)
scale.height
= (window.innerHeight / baseHeight).toFixed(5
)
appRef.style.transform
= `scale(${scale.width}, ${scale.height}) translate(-50%, -50%
)`
}
else
{
//
表示更高
scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5
)
scale.width
= (window.innerWidth / baseWidth).toFixed(5
)
appRef.style.transform
= `scale(${scale.width}, ${scale.height}) translate(-50%, -50%
)`
const resize
= () =>
{
clearTimeout(timer)
timer
= setTimeout(() =>
{
calcRate()
},
100
)
//
改变窗口大小重新绘制
const windowDraw = () =>
{
window.addEventListener(
'resize'
, resize)
return
{
appRef,
calcRate,
windowDraw
<template>
<div class="container" ref="appRef"></div>
</template>
<script setup>
import { useIndex } from "@/utils/windowScale.js";
const appRef = ref(null);
const { calcRate, windowDraw } = useIndex(appRef.value, false);
calcRate();
windowDraw();
</script>
<style>
.container{
width: 1920px;
height: 1080px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: left top;
transition: all 0.28s;
</style>
