现代html页面宽度自适应的核心是正确设置viewport标签、table-layout:fixed与width:100%共存，以及为flex/grid子项添加min-width:0；漏掉任一都会导致布局异常。
现代 HTML 页面要做宽度自适应，核心就一条：别靠猜设备、别硬写像素值、别漏 viewport 标签——漏了它，后面所有 CSS 都白忙。
必须在 <meta name="viewport" content="width=device-width, initial-scale=1">
几乎所有移动端布局错乱（文字小、按钮点不中、横向滚动）都源于这行缺失或位置错误。它不是“可选优化”，而是浏览器渲染的开关。
-
width=device-width必须拼写准确，device_width或deviceWidth都无效 - 必须放在
最顶部，早于任何 CSS/JS；否则 iOS Safari 可能先按 980px 渲染再重排，造成闪屏 - 别加
maximum-scale=1或user-scalable=no，除非是 Kiosk 场景，否则违反可访问性要求
用 flex 或 grid 布局，但别混用同一容器
Flexbox 适合一维线性排列（如导航栏、卡片流），Grid 更适合二维区域划分（如仪表盘）。混用会导致 Android 4.4 WebView 等旧环境行为异常。
- 导航栏小屏竖排、大屏横排：
@media (min-width: 768px) { flex-direction: row; } - 内容区建议用
grid-template-columns: minmax(300px, 1fr) 2fr，比纯百分比更可控 - 用了
flex或grid后，对图片、文字块等内联内容务必加min-width: 0，否则小屏下容易撑破容器 - 避免嵌套三层以上
flex容器，第三层起收缩逻辑易失常；复杂结构优先拆分为独立组件或改用grid-template-areas
table 自适应宽度必须配 table-layout: fixed 和 width: 100%
只写 width: 100% 不够——浏览器默认 table-layout: auto，列宽由内容决定，窄屏下长 URL 或连续英文照样溢出。
-
table元素需同时带：style="width: 100%; table-layout: fixed;" - 列宽控制优先级：
<col>> 第一行<th> 的 <code>width属性；<col width="25%">必须紧接在<table> 开始标签后、<code><thead> 前 <li>长文本溢出要加：<code>word-break: break-all（粗暴有效）或overflow-wrap: break-word（优先空格处断） - Outlook 邮件客户端不支持
table-layout: fixed，发邮件时慎用；列数多时，display: grid是更稳替代 - 通用写法：
img, iframe, video, object { max-width: 100%; height: auto; } - 如果父容器用了
flex或grid，子元素还可能因默认min-width: auto撑开，此时额外加min-width: 0 - 响应式表单、弹窗等高度敏感组件，除了宽度断点，还得考虑
@media (max-height: 600px)单独调padding和font-size
图片和嵌入内容必须设 max-width: 100% + height: auto
只写 width: 100% 会让原始宽 2000px 的图强行拉伸填满，但实际仍会撑开父容器。真正起效的是组合规则。
最常被忽略的不是“怎么写”，而是 viewport 标签的位置、table-layout: fixed 和 width: 100% 的共存关系、以及 min-width: 0 对 flex/grid 子项的必要性——这三点漏掉任意一个，调试半天都找不到根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
