vue3 例子 App.vue
template
<div class="screen-wrapper">
<div class="screen" id="screen">
<router-view />
</div>
</div>
script
import { onMounted } from "vue";
onMounted(() => {
// 初始化自适应-在刚显示的时候就开始适配一次
handleScreenAuto();
// 绑定自适应函数-防止浏览器栏变化后不再适配(这里可做节流优化)
window.onresize = () => handleScreenAuto();
});
// 数据大屏自适应函数
const 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("#screen") as any).style.transform = `scale(${scale}) translate(-50%)`;
};
style
.screen-wrapper {
height: 100%;
width: 100%;
.screen {
display: inline-block;
width: 1920px; //设计稿的宽度
height: 1080px; //设计稿的高度
transform-origin: 0 0;
position: absolute;
left: 50%;
}
}