vue3兼容超宽屏、超窄屏、4K屏幕等等

本文主要是介绍vue3兼容超宽屏、超窄屏、4K屏幕等等，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue3兼容超宽屏、超窄屏、4K屏幕等等

在你的项目src下创建一个hooks文件夹 在里面创建一个 UserScalePage.ts文件
在里面写上

import { onMounted, onUnmounted } from "vue";
import _ from "lodash";
export default function UserScalePage(opstion: any) {const resizeFunc = _.throttle(function () {// 当页面发生改变的时候我们需要重新调用该函数重新计算当前需要的scaletriggerScale(); // 动画缩放网页}, 100);function triggerScale() {// 1.设计稿的尺寸let targetX = opstion.targetX || 1920;let targetY = opstion.targetY || 1080;// 1.设计稿的比例let targetRatio = opstion.targetRatio || 16 / 9;// 第一步获取到当前设备的浏览器宽度// 如果window没有我们就去拿body的let currentX =document.documentElement.clientWidth || document.body.clientWidth;let currentY =document.documentElement.clientHeight || document.body.clientHeight;// 计算当前需要的缩放值let scaleRatioc = currentX / targetX; //默认情况下我们需要缩放的比率let currentRatio = currentX / currentY; //宽高的比率// 如果我们当前的比值大于我们的设计稿比值说明我们当前的屏幕比较的宽或者比较的高if (currentRatio > targetRatio) {scaleRatioc = currentY / targetY; //根据情况不同我们进行选择按照宽度或者高度进行适配document.body.style = `width:${targetX}px; height:${targetY}px;transform: scale(${scaleRatioc}) translateX(-50%); left: 50%`;} else {// 如果比值一样我们就直接缩放document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatioc})`;}}onMounted(() => {// console.log// 添加triggerScale();window.addEventListener("resize", resizeFunc);});onUnmounted(() => {// 释放window.removeEventListener("resize", resizeFunc);});
}

在你的app.vue中引入配置一下

<script setup lang="ts">
import { RouterView } from 'vue-router'
import UserScalePage from "./Hooks/UserScalePage";
let opstion = {targetX: 1920,targetY: 1080,targetRatio: 16 / 9,
};
UserScalePage(opstion);
</script><template><RouterView />
</template><style scoped></style>

最后一步在你的base.css也就是公共样式表中对body进行样式重置

body {position: relative;width: 1920px;height: 1080px;box-sizing: border-box;/* border: 5px solid red; */transform-origin: left top;
}

这篇关于vue3兼容超宽屏、超窄屏、4K屏幕等等的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---