大屏自适应方案

// style-utils.js
const DESIGN_WIDTH = 1920;
const DESIGN_HEIGHT = 1080;

/**
 * 大屏自适应工具类
 * 适用于动态计算场景
 */
class ScreenAdapter {
  constructor() {
    this.designWidth = DESIGN_WIDTH;
    this.designHeight = DESIGN_HEIGHT;
  }
  
  /**
   * px转vw
   * @param {number} px - 设计稿像素值
   * @returns {string} - vw单位字符串
   */
  px2vw(px) {
    return `${(px / this.designWidth) * 100}vw`;
  }
  
  /**
   * px转vh
   * @param {number} px - 设计稿像素值
   * @returns {string} - vh单位字符串
   */
  px2vh(px) {
    return `${(px / this.designHeight) * 100}vh`;
  }
  
  /**
   * 批量设置样式（适用于动态创建的元素）
   * @param {HTMLElement} element - DOM元素
   * @param {Object} styles - 样式对象 {width: 100, height: 200}
   */
  applyStyles(element, styles) {
    Object.keys(styles).forEach(key => {
      const value = styles[key];
      
      if (typeof value === 'number') {
        // 根据样式名判断使用vw还是vh
        if (key.includes('width') || key.includes('left') || key.includes('right')) {
          element.style[key] = this.px2vw(value);
        } else if (key.includes('height') || key.includes('top') || key.includes('bottom')) {
          element.style[key] = this.px2vh(value);
        } else {
          // 字体、边框等特殊处理
          element.style[key] = this.px2vh(value);
        }
      }
    });
  }
  
  /**
   * 监听窗口变化，实时调整
   */
  initResizeObserver() {
    let resizeTimer;
    const handleResize = () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(() => {
        this.onResize();
      }, 200);
    };
    
    window.addEventListener('resize', handleResize);
  }
  
  onResize() {
    // 可以在这里处理特殊逻辑
    console.log('屏幕尺寸变化，当前视窗:', 
      `${window.innerWidth}×${window.innerHeight}`);
  }
}

// 导出单例实例
export default new ScreenAdapter();

// Vue组件中使用
import styleUtil from '@/utils/style-utils';

export default {
  data() {
    return {
      chartStyle: {
        width: 400,
        height: 300,
        marginTop: 20
      }
    };
  },
  
  mounted() {
    // 动态创建元素并应用样式
    const dynamicElement = document.createElement('div');
    styleUtil.applyStyles(dynamicElement, {
      width: 300,
      height: 200,
      fontSize: 16,
      padding: 20
    });
    
    // 或者直接在模板中使用
    this.chartStyle.width = styleUtil.px2vw(400);
    this.chartStyle.height = styleUtil.px2vh(300);
  }
};

// ✅ 推荐使用JS的场景：

// 1. 动态生成内容
function createTooltip(content, x, y) {
  const tooltip = document.createElement('div');
  
  styleUtil.applyStyles(tooltip, {
    position: 'absolute',
    left: x, // 动态坐标
    top: y,
    width: 200,
    height: 'auto',
    padding: 12,
    fontSize: 14
  });
  
  return tooltip;
}

// 2. 第三方库集成
function initECharts(domElement) {
  const chart = echarts.init(domElement);
  
  // 监听resize
  window.addEventListener('resize', () => {
    // 使用JS计算的新尺寸
    chart.resize({
      width: styleUtil.px2vw(800),
      height: styleUtil.px2vh(500)
    });
  });
}

// 3. 复杂交互计算
function calculatePosition(event) {
  // 基于鼠标位置动态计算
  return {
    left: styleUtil.px2vw(event.clientX),
    top: styleUtil.px2vh(event.clientY)
  };
}

// 解决方案：JS兜底逻辑
class SmartAdapter extends ScreenAdapter {
  px2vw(px) {
    const vwValue = (px / this.designWidth) * 100;
    
    // 超大屏幕限制最大尺寸
    if (window.innerWidth > 3840) {
      return `${Math.min(vwValue, 80)}vw`;
    }
    
    // 超小屏幕限制最小尺寸
    if (window.innerWidth < 1366) {
      return `${Math.max(vwValue, 5)}vw`;
    }
    
    return `${vwValue}vw`;
  }
}