min-width 仅作用于单个元素且需在可压缩上下文中生效，对 html/body 无效；flex 项目须先设 min-width: 0 才能应用具体值；table-layout: fixed 下 min-width 应写在第一行单元格或 上；响应式容器推荐 width: 100%; min-width: 280px; max-width: 480px 组合。
min-width 不是用来“设置网页整体最小宽度”的全局开关，而是控制单个元素的最小可缩放宽度。真正起效的前提是：该元素处于**有压缩倾向的上下文里**——比如 display: flex 容器、display: grid 容器、响应式容器（width: 100% 或百分比子项）、或表格单元格。
为什么给 body 或 html 设 min-width 没用
直接写 html { min-width: 800px; } 或 body { min-width: 800px; } 大概率无效，原因很实在：
- 浏览器视口本身不参与 CSS 盒模型的收缩逻辑，
min-width对根元素的约束被忽略或降级处理 - 即使生效，它只限制 body 内容区最小宽，但不会阻止用户拖小窗口——滚动条出现、内容被裁剪，布局照样“错乱”
- 真正需要保护的是具体组件（卡片、表单、表格列），不是抽象的“网页”
flex 项目必须显式写 min-width: 0 才能设具体值
这是最常踩坑的点。在 display: flex 容器中，子项默认有 min-width: auto，表现等价于“内容最小宽度”，哪怕你写了 width: 50%，内容一长就撑开父容器。
要让它真正按比例收缩，得先破掉这个默认约束：
- 先写
min-width: 0—— 解除默认限制，允许压缩到 0 - 再写你需要的最小值，比如
min-width: 240px，此时才生效 - 完整写法示例：
.card { flex: 1; min-width: 0; min-width: 240px; }
table-layout: fixed 下 min-width 要写在第一行或
表格列的 min-width 在 table-layout: auto 下看似可用，但不可控；切到 table-layout: fixed 后，又容易误以为它“失效”——其实只是生效位置不对。
关键规则：
-
min-width只对第一行的<th> 或 <code><td> 生效，后续行同列的 <code>min-width被忽略 - 更可靠的方式是用
<col>标签：<col style="width: 120px">，它直接定义列基准宽，min-width自然被尊重 - 如果必须用 CSS，确保选择器命中第一行对应单元格，例如：
tr:first-child th:nth-child(2) { min-width: 120px; }
响应式卡片/容器推荐组合写法
防错乱的核心不是堆参数，而是建立合理宽度区间。单独 min-width 很难兜住所有情况。
典型安全写法：
article.card {
width: 100%;
min-width: 280px;
max-width: 480px;
}
说明：
-
width: 100%让它在窄屏下尽量占满可用空间 -
min-width: 280px确保小屏下文字不挤、按钮可点、图片不畸变 -
max-width: 480px防止在大屏上拉得太开，影响阅读节奏 - 三者共存时，最终宽度一定落在
[280px, 480px]区间内，且优先级为min-width ≤ 实际宽 ≤ max-width
真正容易被忽略的是：这个 280px 不是拍脑袋定的，它应该来自内容预期——比如一个中文按钮文字“提交订单”加边距，算下来至少需要 260px，那就取整到 280px。单位混用（如 min-width: 20vw）在极端小屏下可能只有 72px，远低于单字宽度，反而导致换行或溢出。
