無論屏幕如何變化，屏幕的內(nèi)容都是等比縮放展示
HTML部分
<body>
<div id="app"></div>
</body>
css部分
body{
width: 100vw;
height: 100vh;
background: url("./assets/images/main/skin-whitemove-bg.gif") repeat !important;
}
#app {
width: 1920px; // 根據(jù)設(shè)計(jì)圖實(shí)際尺寸開發(fā)
height: 1080px; // 根據(jù)設(shè)計(jì)圖實(shí)際尺寸開發(fā)
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 50%;
}
星空背景素材
skin-whitemove-bg.gif
js部分
import { ref,onMounted } from 'vue'
import {debounce} from "lodash";
// 大屏適配
const setScale = () => {
let designWidth = 1920;//設(shè)計(jì)稿的寬度，根據(jù)實(shí)際項(xiàng)目調(diào)整
let designHeight = 1080;//設(shè)計(jì)稿的高度，根據(jù)實(shí)際項(xiàng)目調(diào)整
let scale = document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ?
(document.documentElement.clientWidth / designWidth):
(document.documentElement.clientHeight / designHeight);
document.querySelector('#app').style.transform = `scale(${scale}) translate(-50%,-50%)`;
}
onMounted(()=>{
setScale()
setTimeout(()=>{
document.querySelector('#app').style.transition = 'transform 0.25s linear'; // 增加動(dòng)畫效果
},500)
window.onresize = debounce( ()=>{
setScale()
},100)
})
