文章描述了一个名为changeScale的JavaScript函数，用于根据窗口大小动态调整元素的尺寸和位置，以实现响应式设计。在组件挂载和卸载时监听窗口调整事件，确保布局适应不同屏幕尺寸。
export function changeScale() {
const normalBox = document.getElementById("app");
const widthScale = window.innerWidth / 1920;
const heightScale = window.innerHeight / 1080;
document.body.style.width = "1920px";
document.body.style.height = "1080px";
document.body.style.overflow = "hidden";
// document.body.style.background = "#070818";
normalBox.style.width = "1920px";
normalBox.style.height = "1080px";
normalBox.style.transformOrigin = "left top";
normalBox.style.transition = ".3s ease-in-out";
const bottom = 1080 - 1080 * heightScale;
normalBox.style.marginBottom = `-${bottom}px`;
normalBox.style.transform = `scale(${widthScale}, ${heightScale})`;
}
import { changeScale } from "./rem";
mounted() {
changeScale();
window.addEventListener("resize", changeScale);
},
beforeDestroy() {
window.removeEventListener("resize", changeScale);
}, 
扫一扫
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
