大屏自适应(1920*1080)
2022-03-10 本文已影响0人
萬wan事顺意
html部分
<div class="analysis" id="analysis"></div>
css部分
body{
background: #191b1e;
height: 100vh;
overflow: hidden;
}
.analysis {
box-sizing: border-box;
width: 1920px;
height: 1080px;
background: #191b1e;
overflow: hidden;
transform-origin: left top;
transition: transform 0.2s;
}
js部分
// 获取放大缩小比例
screenScale(document.getElementById('analysis'));
function screenScale(element) {
let width = 1920;
let height = 1080;
let offsetWidth = window.innerWidth;
let offsetHeight = window.innerHeight;
let top = 0;
let left = 0;
let scaleX = offsetWidth / width;
let scaleY = offsetHeight / height;
let scale = Math.min(scaleX, scaleY);
top = (offsetHeight - height * scale) / 2;
left = (offsetWidth - width * scale) / 2;
//核心代码
const transform = 'translate('+left+'px,'+top+'px) scale('+scale+')'
// `translate(${left}px, ${top}px) scale(${scale})`;
element.style.width=width+'px';
element.style.height=height+'px';
element.style.transform=transform;
}
window.onresize = function () {
screenScale(document.getElementById('analysis'));
}