当前位置：首页 > ds >正文

根据窗口大小自动调整页面缩放比例，并保持居中显示

ds 2025/5/11 4:13:24

vue 项目

直接上代码

图片u1.png 是个背景图片图片u2.png 是个遮罩

<template><div id="app"><div class="viewBox"><divclass="screen":style="{ transform: 'translate(-50%,-50%) scale(' + scale + ')' }"><div class="main"><router-view></router-view></div></div></div></div>
</template>
<script>
export default {data() {return {scale: 1,};},mounted() {//立即执行显示分辨率设置方法this.setScreen();window.addEventListener("resize", this.setScreen.bind(this));},methods: {setScreen() {// 可视区域的尺寸let visibleWidth = window.innerWidth;let visibleHeight = window.innerHeight;// 手动配置的面板尺寸let manualWidth = 1920;let manualHeight = 1080;// 计算横向和纵向的缩放系数var widthPercentage = (1.0 * visibleWidth) / manualWidth;var heightPercentage = (1.0 * visibleHeight) / manualHeight;// 取得最小缩放系数this.scale = Math.min(widthPercentage, heightPercentage);},},
};
</script><style lang="scss" scoped>
#app {user-select: none;cursor: pointer;position: relative;width: 100vw;height: 100vh;background-image: url("~@/assets/u1.png");background-size: 100% 100%;background-repeat: no-repeat;pointer-events: all;.viewBox {position: relative;width: 100vw;height: 100vh;background-image: url("~@/assets/u2.png");background-size: 100% 100%;background-repeat: no-repeat;.screen {position: absolute;left: 50%;top: 50%;z-index: 2;width: 1920px;height: 1080px;overflow: hidden;.header {position: absolute;top: 0;left: 0;width: 100%;height: 110px;pointer-events: none;z-index: 10;}.main {position: absolute;top: 0;left: 0;width: 100%;height: 1080px;overflow: hidden;z-index: 5;}}}
}
*,
body,
html {margin: 0;padding: 0;
}
</style>

HTML 页面

<%@page pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自适应缩放页面</title><style>*,body,html {margin: 0;padding: 0;}.screen {position: absolute;left: 50%;top: 50%;z-index: 2;width: 1920px;height: 1080px;overflow: hidden;transform: translate(-50%, -50%) scale(1);transform-origin: center center;}.header {position: absolute;top: 0;left: 0;width: 100%;height: 110px;pointer-events: none;z-index: 10;}.main {position: absolute;top: 100px;left: 20px;width: 100%;height: 1080px;overflow: hidden;z-index: 5;}</style>
</head>
<body><div class="screen" id="screen"><div class="header"></div><div class="main" id="main"><!-- 这里可以放置你的路由视图内容 --><h1>欢迎来到自适应缩放页面</h1><p>这是一个示例内容，你可以在这里放置你的页面内容。</p></div>
</div><script>// 初始缩放系数计算document.addEventListener('DOMContentLoaded', function() {// 初始化缩放系数let scale = 1;// 设置初始缩放function setScreen() {console.log("1234856")// 可视区域的尺寸const visibleWidth = window.innerWidth;const visibleHeight = window.innerHeight;// 手动配置的面板尺寸const manualWidth = 1920;const manualHeight = 1080;// 计算横向和纵向的缩放系数const widthPercentage = visibleWidth / manualWidth;const heightPercentage = visibleHeight / manualHeight;// 取得最小缩放系数scale = Math.min(widthPercentage, heightPercentage);// 应用缩放const screenElement = document.getElementById('screen');// screenElement.style.transform = `translate(-50%, -50%) scale(${scale})`;screenElement.style.transform = `translate(-50%, -50%) scale(`+ scale + `)`;}// 立即执行显示分辨率设置方法setScreen();// 监听窗口大小变化window.addEventListener('resize', setScreen);});
</script>
</body>
</html>

查看全文

http://www.xdnf.cn/news/4808.html