无论屏幕如何变化，屏幕的内容都是等比缩放展示
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; // 根据设计图实际尺寸开发
height: 1080px; // 根据设计图实际尺寸开发
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;//设计稿的宽度，根据实际项目调整
let designHeight = 1080;//设计稿的高度，根据实际项目调整
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'; // 增加动画效果
},500)
window.onresize = debounce( ()=>{
setScale()
},100)
})
网友评论