修改以下代码可直接使用， 有更好的可以AT我， 谢谢大家。
<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel'
xmlns='http://www.w3.org/TR/REC-html40'>
<head>
<style>
* {
padding: 0;
margin: 0;
font-size: 20px;
}
body {
width: 100%;
height: 100%;
background-color: aqua;
}
.idBox {
width: 1150px;
height: 680px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: left top;
}
</style>
</head>
<body>
<div class="idBox iocp" id="iocp">
<div style="width: 200px; height: 200px; background-color: blueviolet;position: absolute;bottom: 0px;">大屏幕适配</div>
</div>
</body>
<script>
let box = document.getElementById('iocp')
box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
function getScale(w = 1150, h = 680) {
const ww = window.innerWidth / w
const wh = window.innerHeight / h
return ww < wh ? ww : wh
}
window.onresize = function () {
box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>
</html>
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
