OpenClaw 大屏适配通常指的是在数据可视化大屏项目中，让界面在不同尺寸和分辨率的屏幕上都能正常显示。以下是几种常见的适配方案

openclaw OpenClaw手册 2026-04-09 4

CSS 适配方案

vw/vh 单位适配

/* 基于1920*1080设计稿 */
.container {
  width: 100vw;
  height: 100vh;
}
.chart-box {
  width: 25vw; /* 1920设计稿中480px → 480/1920*100 = 25vw */
  height: 33.33vh; /* 1080设计稿中360px → 360/1080*100 = 33.33vh */
}

rem 适配方案

// 动态设置根字体大小
function setRem() {
  const designWidth = 1920;
  const baseFontSize = 16;
  const scale = document.documentElement.clientWidth / designWidth;
  document.documentElement.style.fontSize = baseFontSize * scale + 'px';
}
window.addEventListener('resize', setRem);
setRem();

/* CSS中使用rem */
.box {
  width: 24rem; /* 1920设计稿中384px → 384/16 = 24rem */
  height: 18rem; /* 1920设计稿中288px → 288/16 = 18rem */
}

JavaScript 缩放方案

整体缩放方案

class ScreenAdapter {
  constructor(designWidth = 1920, designHeight = 1080) {
    this.designWidth = designWidth;
    this.designHeight = designHeight;
    this.init();
  }
  init() {
    this.updateScale();
    window.addEventListener('resize', this.updateScale.bind(this));
  }
  updateScale() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    // 计算缩放比例
    const scaleX = width / this.designWidth;
    const scaleY = height / this.designHeight;
    const scale = Math.min(scaleX, scaleY);
    // 应用缩放
    document.body.style.transform = `scale(${scale})`;
    document.body.style.transformOrigin = 'top left';
    // 调整容器大小，防止出现滚动条
    document.body.style.width = `${this.designWidth}px`;
    document.body.style.height = `${this.designHeight}px`;
  }
}

CSS变量 + JS控制

// 设置CSS变量
function setCSSVariables() {
  const root = document.documentElement;
  const width = window.innerWidth;
  const height = window.innerHeight;
  // 设计稿基准尺寸
  const designWidth = 1920;
  const designHeight = 1080;
  root.style.setProperty('--scale-x', width / designWidth);
  root.style.setProperty('--scale-y', height / designHeight);
  root.style.setProperty('--scale', Math.min(width / designWidth, height / designHeight));
}
window.addEventListener('resize', setCSSVariables);

:root {
  --scale: 1;
  --scale-x: 1;
  --scale-y: 1;
}
.element {
  transform: scale(var(--scale));
  /* 或者使用单独的缩放 */
  transform: scaleX(var(--scale-x)) scaleY(var(--scale-y));
}

响应式布局方案

媒体查询断点

/* 超宽屏（2560+） */
@media screen and (min-width: 2560px) {
  .container {
    font-size: 18px;
  }
  .chart-container {
    padding: 30px;
  }
}
/* 标准大屏（1920*1080） */
@media screen and (min-width: 1920px) and (max-width: 2559px) {
  .container {
    font-size: 16px;
  }
}
/* 中等屏幕（1366*768） */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
  .container {
    font-size: 14px;
  }
  .chart-container {
    padding: 20px;
  }
}

Flex/Grid 弹性布局

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: minmax(300px, auto);
  gap: 20px;
  padding: 20px;
}
@media (max-width: 1600px) {
  .dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1200px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
}

ECharts/图表适配

ECharts 响应式

const chart = echarts.init(document.getElementById('chart'));
// 监听容器大小变化
const resizeObserver = new ResizeObserver(() => {
  chart.resize();
});
resizeObserver.observe(document.getElementById('chart'));
// 或者使用窗口resize
window.addEventListener('resize', () => {
  chart.resize();
});

图表数据动态调整

function adjustChartOptions(width) {
  const options = {
    grid: {
      // 根据屏幕宽度调整图表内边距
      left: width > 1920 ? '5%' : '3%',
      right: width > 1920 ? '5%' : '3%',
      top: '15%',
      bottom: '10%'
    },
    legend: {
      // 根据屏幕宽度调整图例位置
      orient: width > 1600 ? 'horizontal' : 'vertical',
      top: width > 1600 ? 'top' : 'center',
      right: width > 1600 ? 'center' : 'right'
    }
  };
  return options;
}

完整适配方案示例

class BigScreenAdapter {
  constructor(options = {}) {
    this.options = {
      designWidth: 1920,
      designHeight: 1080,
      mode: 'scale', // scale | rem | vw
      ...options
    };
    this.init();
  }
  init() {
    switch (this.options.mode) {
      case 'scale':
        this.initScaleMode();
        break;
      case 'rem':
        this.initRemMode();
        break;
      case 'vw':
        this.initVwMode();
        break;
    }
    this.bindEvents();
  }
  initScaleMode() {
    this.updateScale();
  }
  updateScale() {
    const { designWidth, designHeight } = this.options;
    const width = window.innerWidth;
    const height = window.innerHeight;
    const scaleX = width / designWidth;
    const scaleY = height / designHeight;
    const scale = Math.min(scaleX, scaleY);
    // 设置缩放
    const app = document.getElementById('app') || document.body;
    app.style.transform = `scale(${scale})`;
    app.style.transformOrigin = 'top left';
    // 设置实际占用空间
    app.style.width = `${designWidth}px`;
    app.style.height = `${designHeight}px`;
    app.style.margin = '0 auto';
  }
  bindEvents() {
    let resizeTimer;
    window.addEventListener('resize', () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(() => {
        this.onResize();
      }, 300);
    });
  }
  onResize() {
    if (this.options.mode === 'scale') {
      this.updateScale();
    }
    // 触发自定义事件
    window.dispatchEvent(new CustomEvent('screen-resize', {
      detail: {
        width: window.innerWidth,
        height: window.innerHeight
      }
    }));
  }
}
// 使用示例
const adapter = new BigScreenAdapter({
  designWidth: 3840,
  designHeight: 2160,
  mode: 'scale'
});