|
- // rem-resize.js
- (function (doc, win) {
- 'use strict';
-
- // 配置项
- const config = {
- designWidth: 1920, // 设计稿宽度
- baseFontSize: 16, // 基础字体大小(设计稿下1rem = 16px)
- minFontSize: 12, // 最小字体限制
- maxFontSize: 24, // 最大字体限制
- 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);
|