基于屏幕尺寸与缩放系数的元素布局适配问题咨询

针对你提出的三个布局适配问题，以下是具体的代码修改方案：

问题1：大屏图表在右侧，小屏图表移至聊天窗口下方 #

修改步骤： #

1. 给聊天窗口和图表添加统一父容器，便于控制布局：

<body>
  <div class="main-container">
    <section class="msger">
      <!-- 聊天窗口原有代码保持不变 -->
    </section>

    <div class="chart-container">
      <canvas id="myChart"></canvas>
    </div>
  </div>
</body>

2. 调整CSS，通过Flexbox和媒体查询实现响应式切换：

/* 替换原body样式 */
body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 20px 0;
  background-image: var(--body-bg);
  font-family: Helvetica, sans-serif;
}

/* 父容器样式 */
.main-container {
  display: flex;
  gap: 20px;
  width: 95%;
  max-width: 1400px;
}

/* 小屏断点（768px）切换垂直布局 */
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }
}

问题2：设置聊天窗口60%宽度、图表40%宽度，并适配高度 #

修改步骤： #

在CSS中调整聊天窗口和图表容器的尺寸：

/* 修改.msger样式 */
.msger {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: 60%;
  height: 80vh;
  border: var(--border);
  border-radius: 5px;
  background: var(--msger-bg);
  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
}

/* 图表容器样式 */
.chart-container {
  width: 40%;
  height: 80vh;
}

/* 小屏重置宽度为100%，调整高度避免溢出 */
@media (max-width: 768px) {
  .msger, .chart-container {
    width: 100%;
    height: 70vh;
  }
}

/* 强制Chart.js画布占满容器 */
#myChart {
  width: 100% !important;
  height: 100% !important;
}

问题3：网页缩放时保持聊天和图表宽度比例恒定 #

解决方案： #

通过flex份数替代固定百分比，结合clamp函数限制父容器宽度，确保缩放时比例不变：

/* 修改父容器和子元素样式 */
.main-container {
  display: flex;
  gap: 20px;
  width: clamp(800px, 95%, 1400px); /* 最小800px，最大1400px，中间自适应 */
}

.msger {
  flex: 3; /* 占3份，对应60%比例 */
  /* 其他样式不变 */
}

.chart-container {
  flex: 2; /* 占2份，对应40%比例 */
  /* 其他样式不变 */
}

当网页缩放时，只要父容器处于800px-1400px范围内，聊天窗口和图表始终保持3:2的宽度比例；屏幕小于800px时自动切换为垂直布局。

内容的提问来源于stack exchange，提问作者BlackHawk