大屏自适应缩放解决方案

酒渣

于 2024-09-12 13:35:51 发布

阅读量240

点赞数 2

分类专栏： css js 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_40923558/article/details/142171517

版权

js 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

做大屏做难搞的就是自适应问题, 此方案是在视频播放器上得到的灵感, 计算宽高的缩放比, 根据宽高最小的缩放比进行缩放, 用到的是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%)`;
	}