大屏适配window.onresize监听窗口变化,该方法已用于生产
1 js部分 // 本次开发场景2880*1080 配合css 2 mounted () { 3 this.pageResize() 4 window.onresize = () => { 5 setTimeout(() => { 6 this.pageResize() 7 }, 200) 8 } 9 }, 10 methods:{ 11 pageResize () { 12 // * 默认缩放值 13 let scale = { 14 width: '1', 15 height: '1' 16 } 17 // * 设计稿尺寸(px)根据实际修改 18 let baseWidth = 2880 19 let baseHeight = 1080 20 // * 需保持的比例(默认2.66667) 21 const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)) 22 // 当前宽高比 23 const currentRate = parseFloat( 24 (window.innerWidth / window.innerHeight).toFixed(5) 25 ) 26 if (currentRate > baseProportion) { 27 // 表示更宽 28 scale.width = ( 29 (window.innerHeight * baseProportion) / 30 baseWidth 31 ).toFixed(5) 32 scale.height = (window.innerHeight / baseHeight).toFixed(5) 33 this.$refs.appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` 34 } else { 35 // 表示更高 36 scale.height = ( 37 window.innerWidth / 38 baseProportion / 39 baseHeight 40 ).toFixed(5) 41 scale.width = (window.innerWidth / baseWidth).toFixed(5) 42 this.$refs.appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` 43 } 44 }, 45 }
1 HTML 2 <template> 3 <div id="main_box" ref="appRef" class="main_box_0121"> 4 <div class="bg"> 5 <div class="head"></div> 6 <div class="content_left"></div> 7 <div class="content_center"></div> 8 <div class="content_right"></div> 9 </div> 10 </div> 11 </template>
1 CSS 2 #main_box { 3 position: absolute; 4 top: 50%; 5 left: 50%; 6 width: 2880px; 7 height: 1080px; 8 transform: translate(-50%, -50%); 9 transform-origin: left top; 10 11 .bg { 12 position: relative; 13 width: 100%; 14 height: 100%; 15 background-image: url('../../assets/pageBg.jpg'); 16 background-position: center center; 17 background-size: cover; 18 //标题 19 .head { 20 width: 100%; 21 height: 85px; 22 background: url('../../assets/head.png') no-repeat; 23 background-position: center center; 24 background-size: 100% 100%; 25 z-index: 100; 26 } 27 // left 28 .content_left { 29 position: absolute; 30 top: 58px; 31 width: 14.5%; 32 height: 1000px; 33 padding: 35px 0.5% 0 0.9%; 34 margin: 0 0.5%; 35 background: url('../../assets/left.png') no-repeat; 36 background-position: center center; 37 background-size: 100% 100%; 38 } 39 .content_center { 40 position: absolute; 41 top: 72px; 42 left: 15.8%; 43 width: 83.5%; 44 height: 960px; 45 background: url('../../assets/bg2.png') no-repeat; 46 background-position: center center; 47 background-size: 100% 100%; 48 } 49 //right 50 .content_right { 51 position: absolute; 52 top: 82px; 53 right: 1.1%; 54 width: 30.3%; 55 height: 940px; 56 padding: 30px 40px 20px 50px; 57 background: url('../../assets/right.png') no-repeat; 58 background-position: center center; 59 background-size: 100% 100%; 60 }
}
案例 https://cloud.njkshb.com:92/bigScreen