固定像素宽度是溢出的直接推手，因为硬编码如width: 1280px在375px宽的iphone上强行占据超出视口的宽度，浏览器不会自动压缩；正确方案是max-width + width: 100%组合，配合margin: 0 auto居中，并确保父容器有明确宽度约束。
固定像素宽度是溢出的直接推手，不是 Flex 或 Grid 的问题，而是你写死了尺寸。
为什么 width: 1280px 在 iPhone 上必出横向滚动条
任何硬编码的 width: 1280px、min-width: 1220px 或 width: 500px，在 375px 宽的 iPhone 或 400% 系统缩放下，都会撑破视口。浏览器不会“自动压缩”它——它就只是强行占满 1280px，然后把多余部分推到屏幕外。
-
.navbar { width: 2000px; }+position: fixed= 横向滚动条常驻 -
.card { width: 300px; margin-right: 20px; }并列 4 个 → 总宽超 1300px，小屏下根本塞不下 -
tr input { width: 20px; height: 40px; }在高缩放下变成“看不见的按钮”，因为 px 尺寸脱离上下文
max-width + width: 100% 是最简健壮组合
它不依赖媒体查询，也不要求你预设断点，只让元素“有上限、能收缩”：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
max-width: 1280px控制大屏不拉得太开 -
width: 100%确保小屏自动贴满父容器宽度 - 必须配
margin: 0 auto居中，否则右侧会空出或偏移 - 若父容器没设
width或max-width，该组合可能失效——要逐层检查祖先宽度链
Flex 子项必须放弃绝对尺寸
Flex 容器本身响应没问题，但子项若还用 width: 300px 或 margin-right: 20px，等于给弹性系统加了刚性锁。
- 用
flex: 1 1 calc(33.333% - 1rem)替代固定宽 + margin；gap更可靠 - 设
min-width: 280px防止小屏压缩失真，而不是靠媒体查询硬切 - 避免
white-space: nowrap在文本内，它会阻止换行，加剧溢出
table-layout: fixed 不是开关，是三件套
表格溢出不是加了 width: 100% 就完事。它需要三个条件同时满足才生效：
-
table { table-layout: fixed; width: 100%; }—— 缺一不可 - 至少一个
<col>或第一行<th> 带 <code>width（推荐百分比，如width: 30%） -
td, th { word-break: break-word; white-space: normal; }—— 作用于单元格，不能只写在table上 - 嵌套的
<div> 或 <code><pre class="brush:php;toolbar:false;"></pre>要单独重置white-space，否则继承nowrap特殊比例屏幕（比如 21:9 超宽屏或 4:3 平板）下，表格列宽失衡比溢出更隐蔽——它让你误以为“没溢出”，实则语义错位。这时候，
data-label卡片降级比强行撑表更诚实。
