记录前端大屏适配一种方式
设计稿宽1920px，高1080px
mounted() {
console.log('base')
// 初始化自适应 ----在刚显示的时候就开始适配一次
this.handleScreenAuto();
// 绑定自适应函数 ---防止浏览器栏变化后不再适配
window.onresize = () => this.handleScreenAuto();
},
destroyed() {
window.onresize = null;
},
methods: {
handleScreenAuto() {
const designDraftWidth = 1920; //设计稿的宽度
const designDraftHeight = 1080; //设计稿的高度
// 根据屏幕的变化适配的比例
const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight
? document.documentElement.clientWidth / designDraftWidth
: document.documentElement.clientHeight / designDraftHeight;
// 缩放比例
document.querySelector('.main').style.transform = `scale(${scale}) translate(-50%, -50%)`;
return 1;
}
}
}
<div class="main">
内容
</div>
.main{
width: 1920px; //设计稿的宽度
height: 1080px; //设计稿的高度
transform-origin: left top;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
参考：https://blog.csdn.net/Liushiliu104/article/details/129372083
https://blog.csdn.net/L1147484597/article/details/128443705
