45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
// rem-resize.js
|
||
(function (doc, win) {
|
||
'use strict';
|
||
|
||
// 配置项
|
||
const config = {
|
||
designWidth: 1920, // 设计稿宽度
|
||
baseFontSize: 16, // 基础字体大小（设计稿下1rem = 16px）
|
||
minFontSize: 12, // 最小字体限制
|
||
maxFontSize: 18, // 最大字体限制
|
||
delay: 300, // 窗口变化时的延迟执行(ms)
|
||
};
|
||
|
||
const docEl = doc.documentElement;
|
||
const resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
|
||
let resizeTimeout;
|
||
|
||
function calculateFontSize() {
|
||
const clientWidth = docEl.clientWidth || win.innerWidth;
|
||
if (!clientWidth) return;
|
||
|
||
const fontSize = Math.min(
|
||
Math.max((clientWidth / config.designWidth) * config.baseFontSize, config.minFontSize),
|
||
config.maxFontSize,
|
||
);
|
||
|
||
docEl.style.fontSize = fontSize + 'px';
|
||
|
||
// 可选：调试输出
|
||
if (win.console) {
|
||
console.debug('[REM-Resize]', 'width:', clientWidth, 'font-size:', fontSize + 'px');
|
||
}
|
||
}
|
||
|
||
function resizeHandler() {
|
||
clearTimeout(resizeTimeout);
|
||
resizeTimeout = setTimeout(calculateFontSize, config.delay);
|
||
}
|
||
|
||
calculateFontSize();
|
||
|
||
// 初始化监听
|
||
win.addEventListener(resizeEvt, resizeHandler, false);
|
||
})(document, window);
|