我們只要監(jiān)聽瀏覽器窗口大的小，同時(shí)控制變化的比例就可以了。
- 封裝一個(gè)全局組件
以vue 為主，直接粘貼本人編寫的代碼如下，該公共組件為了下文中方便描述，命名為ScreenAdapter
<template>
<div
class="ScreenAdapter"
:style="style"
>
<slot />
</div>
</template>
<script>
export default {
name: '',
//參數(shù)注入
props: {
width: {
type: String,
default: '1920'
},
height: {
type: String,
default: '1080'
}
},
data() {
return {
style: {
width: this.width + 'px',
height: this.height + 'px',
transform: 'scale(1) translate(-50%, -50%)'
}
}
},
mounted() {
this.setScale()
window.onresize = this.Debounce(this.setScale, 1000)
},
methods: {
Debounce: (fn, t) => {
const delay = t || 500
let timer
return function() {
const args = arguments
if (timer) {
clearTimeout(timer)
}
const context = this
timer = setTimeout(() => {
timer = null
fn.apply(context, args)
}, delay)
}
},
// 獲取放大縮小比例
getScale() {
const w = window.innerWidth / this.width
const h = window.innerHeight / this.height
return w < h ? w : h
},
// 設(shè)置比例
setScale() {
this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, -50%)'
console.log('任你千變?nèi)f化,我都不會(huì)影響性能')
}
}
}
</script>
<style lang="scss" scoped>
.ScreenAdapter {
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 50%;
transition: 0.3s;
background: red;
}
</style>
- 將此組件作為外殼，包在我們搭建的頁(yè)面上
<ScreenAdapter> <div>大家好，我是大屏展示頁(yè)面</div> </ScreenAdapter>
- 定義網(wǎng)頁(yè)規(guī)范
根據(jù)美工給出的設(shè)計(jì)（主要獲取美工給出的分辨率，如1920*1080）。
Div布局多采用flex+百分比布局（當(dāng)然也可以根據(jù)美工給出的設(shè)計(jì)，默認(rèn)寫px。）。
各類空間設(shè)計(jì)，根據(jù)美工給出的px進(jìn)行定義即可
