大屏自适应
如何做大屏自适应
export function autoScale(selector, options) {
// 这里定义了一个 debounce 函数,用于限制函数在一定时间内只能触发一次
function debounce(fn, delay) {
let timer = null;
return function () {
// 每次函数被调用时,清除之前的定时器
if (timer) clearTimeout(timer);
// 创建一个新的定时器,在指定的延迟后执行传入的函数
timer = setTimeout(fn, delay);
}
}
// 这里定义了 autoScale 函数,用于根据指定的宽高比例调整元素的大小和位置
// 首先获取指定选择器对应的元素
const el = document.querySelector(selector);
// 从传入的参数 options 中获取目标宽度和高度
const { width, height } = options;
// 设置元素变换的原点为左上角
el.style.transformOrigin = 'top left';
// 设置元素的过渡效果,以便在缩放时产生平滑的动画
el.style.transition = 'transform .5s';
// 定义一个初始化函数,用于计算并设置元素的缩放和位置
function init() {
// 计算水平和垂直方向上的缩放比例,取两者中较小的值
const scaleX = innerWidth / width;
const scaleY = innerHeight / height;
const scale = Math.min(scaleX, scaleY);
// 计算使元素居中显示的偏移量
const left = (innerWidth - width * scale) / 2;
const top = (innerHeight - height * scale) / 2;
// 设置元素的变换,包括缩放和平移
el.style.transform = `translate(${left}px, ${top}px) scale(${scale})`;
}
// 首次调用初始化函数,确保页面加载时元素已经按照指定比例进行了调整
init();
// 监听窗口大小变化事件,并使用 debounce 函数来控制频繁触发的 resize 事件
addEventListener('resize', debounce(init, 200));
}
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 CC_Blog!
评论