通过 CSS aspect-ratio 属性结合媒体查询与弹性布局，可实现多尺寸盒子在窄屏下等比缩放，无需 JavaScript 即可维持原始宽高比。

通过 css `aspect-ratio` 属性结合媒体查询与弹性布局，可实现多尺寸盒子在窄屏下等比缩放，无需 javascript 即可维持原始宽高比。

要让一组水平排列的容器（如 .Bx 和 .B4）在小屏幕下自动缩小并严格保持原有宽高比，关键在于摒弃固定像素（em/px）宽高声明，转而采用基于容器的相对单位 + aspect-ratio 控制比例，并配合响应式布局机制。

✅ 推荐方案：aspect-ratio + flexbox + clamp()（现代、简洁、可靠）

首先，移除所有硬编码的 width/height（如 width: 5em; height: 2.0em），改用 aspect-ratio 显式定义比例，并用 flex 替代 inline-block 实现真正的流式响应：

.Container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.5em;
}

.Bx {
  cursor: pointer;
  flex: 1 1 auto; /* 可伸缩、可换行、基础尺寸由内容决定 */
  min-width: 0; /* 允许 flex 项在窄屏中压缩 */
  aspect-ratio: 5 / 2; /* 原始 5em × 2em → 宽高比 5:2 */
  border: 1px solid gray;
  background-color: #f7e0f7;
  box-sizing: border-box;
}

.B4 {
  aspect-ratio: 10 / 2; /* 原始 10em × 2em → 宽高比 10:2 = 5:1 */
  background-color: #e0f7ff;
}

/* 在小屏下限制最大宽度，触发等比缩放 */
@media (max-width: 768px) {
  .Bx, .B4 {
    flex-basis: calc(33.333% - 0.333em); /* 每行最多3个，留出 gap 余量 */
  }
}

@media (max-width: 480px) {
  .Bx, .B4 {
    flex-basis: calc(50% - 0.25em); /* 每行最多2个 */
  }
}

? 为什么 aspect-ratio 是核心？
它让浏览器在任意宽度下自动计算高度以维持比例——即使你只设 width: 100% 或 flex-basis: 40%，高度也会同步缩放，彻底解决“拉伸变形”或“高度塌陷”问题。

⚠️ 注意事项

• aspect-ratio 兼容性良好（Chrome 88+、Firefox 89+、Safari 15.4+），旧版 Safari 可用 padding-top 技巧降级（如 padding-top: 40% 配合 position: relative + absolute 子元素）。
• 避免混用 white-space: nowrap 和 flex-wrap ——前者会强制单行溢出，与响应目标冲突；已移除。
• 不推荐仅依赖 @media (aspect-ratio: 1/1)（如答案中所提），因为它检测的是视口宽高比（如手机竖屏 vs 横屏），而非容器宽度变化，无法解决本例中“行内盒子因屏幕变窄而需缩放”的核心需求。

✅ 最终 HTML 结构优化建议

将
换行为语义化分组（如

），便于 CSS 精准控制每行布局：

<div class="Container">
  <div class="row">
<span>R1</span><div class="Bx"></div>
<div class="Bx"></div>...</div>
  <div class="row">
<span>R2</span><div class="Bx"></div>
<div class="Bx"></div>...</div>
  <!-- 后续行同理 -->
</div>

再配合 .row { display: flex; gap: 0.5em; }，即可实现每行独立响应，更可控。

总结：用 aspect-ratio 锁定比例，用 flex 实现流式分布，用 @media 控制每行数量——三者协同，即可优雅达成“盒子随屏缩放且不失真”的目标。