kd-aiot-frontend-vis/public/flexible.js

// 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();
    }
  });
})();