大屏自适应缩放解决方案
做大屏做难搞的就是自适应问题, 此方案是在视频播放器上得到的灵感, 计算宽高的缩放比, 根据宽高最小的缩放比进行缩放, 用到的是css里的transform: scale, 希望此案例能有所帮助, 如果有更好的解决方案也希望大家一起分享
css部分
*{padding: 0; margin: 0}.largeScreen{width: 100vw; height: 100vh; background: url('./bg.jpg') no-repeat;background-size: cover;
}
.box{width: 1920px; height: 1080px; position: fixed;background: pink; opacity: 0.5; transform-origin: left top;left: 50%; top: 50%;
}
.innerMinBox{font-size: 22px; color: #2AC5A9; font-weight: bold;}
html部分
<div class="largeScreen"><div class="box" id="box"><div class="innerMinBox">文字内容</div></div>
</div>
js部分
// 控制大屏放大缩小let box = document.getElementById('box');box.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;/*** 计算缩放比* w: 设计稿的原始宽度; w要与css部分设置的box的宽度一致* h: 设计稿的原始高度; h要与css部分设置的box的高度一致* */function getScale(w=1902, h=1080){// 计算宽高的缩放比let ww = window.innerWidth / w;let wh = window.innerHeight / h;return ww < wh ? ww : wh}/**只要屏幕发生变化就要重新计算并设置缩放比 */window.onresize = ()=>{box.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;}