//触发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';
js 页面内容-自适应-高宽固定(通过transform缩放)
于 2024-07-19 09:33:15 首次发布