// rem 适配方案 - 针对大屏可视化优化 (function flexible() { const docEl = document.documentElement; const dpr = window.devicePixelRatio || 1; // 设置 data-dpr 属性,用于 css 适配 docEl.setAttribute('data-dpr', dpr); function setRem() { // 设计稿宽度 1920px,基准 font-size: 16px // 1rem = 16px const baseWidth = 1920; const baseFontSize = 16; // 获取当前视口宽度 const clientWidth = docEl.clientWidth || window.innerWidth; // 计算 rem 基准值 - 保持比例 // 最小宽度 1280px,最大不限制 const width = Math.max(clientWidth, 1280); const rem = (width / baseWidth) * baseFontSize; // 设置根字体大小 docEl.style.fontSize = rem + 'px'; } // 初始化 setRem(); // 监听窗口变化 window.addEventListener('resize', setRem); window.addEventListener('orientationchange', setRem); // 页面显示时重新计算 document.addEventListener('visibilitychange', function() { if (!document.hidden) { setRem(); } }); })();