最有效方式是在body上设min-width（如320px或768px）并配合viewport meta标签，同时注意布局上下文——flex需父容器加min-width且子项设flex-shrink:0，grid则用grid-template-columns控制列宽，table需table-layout:fixed才使td的min-width生效。
body 上直接设 min-width 和 min-height
最常用也最直接的方式，是在 元素上用 CSS 设置最小尺寸。浏览器会把 body 当作内容容器的根，设了它，整个可视区域就不会被压缩到过小。
常见错误是只设 width 或 height —— 这些是“初始值”，不是“底线”。一旦窗口缩得太小，内容仍可能被挤压变形或出现横向滚动条。
-
min-width推荐设为320px（兼容多数手机竖屏）或768px（平板窄屏），避免文字挤成一团 -
min-height一般不用设在body上，除非你明确要撑满视口且禁止页面高度塌陷；更稳妥的是对html或某个主容器设min-height: 100vh - 别忘了加
box-sizing: border-box，否则 padding 和 border 会额外撑大实际占用空间
为什么不能只靠 table 或 td 的 width 属性？
HTML 表格的 width 属性（比如 <table width="800">）是过时的内联属性，现代浏览器虽兼容，但它的行为不可控：它只是“建议宽度”，浏览器会按列内容、<code>td 内联样式、CSS 规则层层计算后覆盖它。更关键的是，td 根本不支持 min-width —— 即使写了也无效。
所以指望 <td width="200"> 来卡住最小宽度，基本会失败。真实场景中，表格列宽常被内容顶开，或被父容器压缩到文字换行。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>若真需要表格列有“最小宽度”，得用 CSS 的 <code>min-width 作用于 td 或 th，但必须配合 table-layout: fixed 才生效
table-layout: fixed 会让表格按第一行 th/td 的宽度定义来分配列宽，忽略后续内容长度，适合数据表格但不适合图文混排width 属性设 table 宽度，容易和响应式断点冲突，比如在 400px 宽屏幕上强行维持 800px 表格，必然触发横向滚动
min-width 设在哪一层才真正起效？
很多人把 min-width 加在某个 <div class="container"> 上，结果发现没用——那是因为这个容器没占满整行，或者被父级的 <code>flex / grid 布局压缩了。真正起效的位置取决于布局上下文：
- 如果页面是传统流式布局（无 flex/grid），
body或最外层包裹容器设min-width就够了 - 如果用了
display: flex，父容器默认会收缩子项，此时要在父容器上加min-width，同时给子项加flex-shrink: 0防止被压扁 - 如果用了
display: grid，网格容器本身设min-width有效，但列轨道（如grid-template-columns: 1fr minmax(300px, 1fr))）才是控制单列最小宽度的关键 - 千万别在
position: absolute或float元素上单独设min-width，它脱离文档流后，这个限制对整体布局已无意义
移动端适配时 min-width 的坑
在 index.html 中设了 min-width: 375px，但手机上还是能缩到更小——大概率是漏了 viewport meta 标签。没有它，移动端浏览器会模拟桌面视口（通常是 980px），你的 min-width 就完全不起作用。
必须确保 里有：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
否则所有基于视口的尺寸控制（包括 min-width、vw、媒体查询）都会失效。
- 有些老项目还加了
user-scalable=no，这会让用户无法缩放，但不会影响min-width生效逻辑 -
initial-scale=1.0必须写，否则 iOS Safari 可能以非 1:1 比例渲染，导致 CSS 像素和物理像素错位 - 如果用了第三方 UI 框架（如 Bootstrap），检查是否被它的响应式重置规则覆盖，比如
.container默认有max-width但没设min-width
viewport + body 或根容器的 min-width + 布局上下文的协同。最容易被忽略的是：没加 viewport meta，或者把 min-width 加在了被 flex 自动收缩的子元素上。
