CSS如何实现电影购票APP座位布局适配所有屏幕分辨率

开发电影购票应用时，按行列排布的座位区域内容超出屏幕边界，预期效果为所有座位完整显示在屏幕可视区域内，无越界。

此前尝试通过调整宽度属性修复未生效，原有问题样式代码：

.booking-row {
    max-width: 100%;
    overflow-x: auto;
}

问题可通过在线示例复现：问题复现示例

问题核心原因：仅给行容器设置宽度和滚动属性未生效，是因为单个座位使用固定宽高+固定间距，整行总宽度为固定值，且未正确设置盒模型规则，导致内容总宽度超出容器可视范围，可根据需求二选一实现：

• 自适应无滚动方案（推荐，适配全尺寸屏幕）
  使用Grid布局让座位自动适配容器宽度，保证所有座位完整展示无需滚动：

  /* 全局统一盒模型，避免padding/border撑宽元素 */
  * {
    box-sizing: border-box;
  }
  /* 座位区域外层容器 */
  .seat-area {
    width: 100%;
    padding: 0 12px;
  }
  .booking-row {
    width: 100%;
    display: grid;
    /* 根据每行座位数自动分配列宽，repeat第一个参数替换为每行实际座位数 */
    grid-template-columns: repeat(16, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0;
  }
  .seat {
    width: 100%;
    aspect-ratio: 1 / 1; /* 保持座位正方形比例 */
    border-radius: 3px 3px 1px 1px;
  }
  

• 固定座位尺寸+横向滚动方案
  如果需要保持座位大小固定不缩放，修正滚动容器的盒模型和排版规则即可：

  * {
    box-sizing: border-box;
  }
  .booking-row {
    width: 100%;
    overflow-x: auto;
    /* 隐藏纵向溢出，禁止座位换行 */
    overflow-y: hidden;
    white-space: nowrap;
    padding: 8px 0;
  }
  .seat {
    display: inline-block;
    /* 保留原有固定宽高、外边距样式即可 */
  }
  

提示：box-sizing: border-box是移动端布局常用基础规则，会让元素的内边距、边框包含在设置的宽度内部，不会额外撑大元素导致溢出。

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