vue 项目
直接上代码
图片u1.png 是个背景图片 图片u2.png 是个遮罩
<template>
<div id="app">
<div class="viewBox">
<div
class="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>
