js 页面内容-自适应-高宽固定（通过transform缩放）

//触发fun
// window.onresize = function () {
//   }




// 获取浏览器窗口的宽度和高度
let cliWidth = document.documentElement.clientWidth || document.body.clientWidth;
let cliHeight = document.documentElement.clientHeight || document.body.clientHeight;

// 定义内容的宽度和高度，这里是设计尺寸的90%
let contW = 2133 * 0.9;
let contH = 1002 * 0.9;

// 计算窗口宽度和内容宽度的比例，和窗口高度与内容高度的比例
let w = cliWidth / contW;
let h = cliHeight / contH;

// 选择最小的比例作为缩放比例
let per = w < h ? w : h;

// 获取要缩放的元素，这里是 id 为 'app' 的 DOM 元素
let appDom = document.querySelector('#app');

// 使用 CSS transform 属性进行缩放
dom.style.transform = 'scale(' + per + ')';//高宽比例固定
appDom.style.transform = 'scale(' + w + ',' + h + ')'//高宽比例自适应

// 设置 transform 原点为左上角
dom.style.transformOrigin = 'top left';
// 设置元素的宽度和高度为内容宽度和高度
dom.style.width = contW + 'px';
dom.style.height = contH + 'px';