- 自适应
<template>
<section class="base trans-common">页面内容域</section>
</template>
<script>
mounted() {
this.$nextTick(() => {
function setScale() {
let designWidth = 1920; //设计稿的宽度，根据实际项目调整
let designHeight = 1080; //设计稿的高度，根据实际项目调整
// 缩放比
const wh = window.innerHeight / designHeight;
const ww = window.innerWidth / designWidth;
let scale = ww < wh ? ww : wh;
// 获取所有类名为 trans-common 的元素，设置 transform 属性
let selectorAll = document.querySelectorAll(".trans-common");
for (let i = 0; i < selectorAll.length; i++) {
selectorAll[i].style =
"transform: translate(-50%, -50%) scale(" + scale + "); ";
}
}
setScale();
});
},
</script>
<style>
.base {
width: 1920px;
height: 1080px;
position: absolute;
left: 50%;
top: 50%;
</style>