用 max-width 控制块级容器（如 article、main）宽度而非文字本身，推荐 840px 起点并配合 margin: 0 auto 居中；需结合媒体查询分三档响应（手机 100%、平板 720px、桌面 920px），同步约束内联元素、调整字号与行高以保持阅读舒适。
用 max-width 控制正文容器宽度，不是文字本身
文字本身没有「最大宽度」属性，真正起作用的是包裹它的块级容器（比如 <article>、<main> 或 .content）。限制这个容器的 max-width，才能让每行文字落在人眼舒适的阅读区间（通常 50–75 个英文字符，约 720px–960px）。直接对 p 或 span 设 max-width 没意义——它们默认是内联或自动撑开的。
常见错误现象：
• 设置了 p { max-width: 800px; }，但没加 display: block 或 width: 100%，结果毫无效果
• 容器父元素没设 width: 100%，导致 max-width 失去参照基准
-
max-width: 840px是较稳妥的起点（兼顾中英文阅读密度） - 必须搭配
margin: 0 auto实现居中，否则只限宽不居中，大屏下文字全堆在左侧 - 保留
width: 100%，确保小屏下仍能铺满，不出现意外留白
配合媒体查询分档调整，别只靠一个固定值
一个 max-width: 840px 在 1440px 屏幕上还行，但在 2560px 的超宽屏上就显得太窄、两侧留白过大；反过来，在 768px 平板上又可能略宽。用媒体查询分三档更合理：
- ≤ 768px（手机）：
max-width: 100%，不设上限，让文字占满可用空间 - 769px – 1023px（平板）：
max-width: 720px，避免文字过密，也防图片撑破 - ≥ 1024px（桌面）：
max-width: 920px，比纯 100% 更紧凑，但比 840px 略宽松，适配高分屏
断点值建议用行业通用值（如 768px、1024px），别自定义成 773px 这类难维护的数字。注意：媒体查询里不要写 min-width 和 max-width 双重条件，容易漏覆盖，用单边判断更稳。
立即学习“前端免费学习笔记（深入）”；
内联元素（图片/链接/代码块）必须同步约束
即使容器 max-width 设得再准，只要里面混了一个没限制的 <img> 或长 URL 链接，整行就会被强行撑开，max-width 彻底失效。
- 所有响应式图片加
max-width: 100%; height: auto; - 表格加
table-layout: fixed; max-width: 100%，防列宽爆炸 - 内联链接或标签加
white-space: normal，避免nowrap导致长文本横向溢出 - 代码块（
<pre>）需加overflow-x: auto或word-break: break-all，否则会破坏布局
字号也要随宽度动态调，光控宽不调字会失衡
大屏下如果字号还用 16px，文字会显得稀疏空洞；小屏下若用 18px，又可能换行频繁、按钮变挤。宽度和字号得联动：
- ≤ 768px：
font-size: 16px（iOS 最小可读基准） - ≥ 1024px：
font-size: 18px或1.125rem（提升密度） - ≥ 1440px：
font-size: 19px，但不超过20px，否则行高难匹配，段落发虚
更现代的做法是用 clamp()，比如 font-size: clamp(16px, 2.5vw, 19px)，但要注意：旧版 Safari（iOS 13.7 及更早）不支持，降级方案不能只靠 @supports 包一层，得在构建流程里补 fallback 字号。
最易被忽略的一点：字体大小变化后，line-height 必须同步微调。16px 时用 1.6，19px 时若还用 1.6，视觉行距就偏紧。实际应按比例缩放，或统一用无单位值（如 line-height: 1.55）保持倍率稳定。
