<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
position: fixed;
width: 1920px;
height: 1080px;
top: 50%;
left: 50%;
transform-origin: left top;
background: url("/img/map.png") no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
<script>
const container = document.getElementsByTagName("div")[0];
window.addEventListener("resize", resize);
function resize(w = 1920, h = 1080) {
//这里的 w 和 h 是设计稿的宽高
let ww = window.innerWidth / w;
let hh = window.innerHeight / h;
let result = ww < hh ? ww : hh;
container.style.transform =
transform = `scale(${result}) translate(-50%, -50%)`;
}
</script>
</html>
数据大屏适配
最新推荐文章于 2024-10-07 09:24:46 发布