网页响应式排版的核心是布局伸缩与文字流动：用rem+无单位line-height实现字号行高同步自适应，max-width+百分比控制容器宽度，padding/margin用rem/em保持视觉比例，媒体查询仅微调关键变量。
要让网页在手机、平板、桌面等不同设备上都读得舒服，关键不是堆功能，而是让文字和布局真正“跟着屏幕呼吸”。核心是两件事：布局能伸缩，文字能流动。光做响应式布局不够，还得让字号、行高、段间距这些排版细节也同步自适应。
用相对单位统一控制字号与行高
字体大小用 rem，行高必须用无单位数值（比如 1.6），两者配合才能形成真正的流式文字节奏。如果 font-size 是 1.2rem，line-height: 1.6 就自动算出 1.92rem 的实际行距；换成 0.875rem 字号，行高也按比例缩为 1.4rem。这样用户放大系统字体、页面缩放、或你用 JS 动态调整根字号时，所有文本的疏密关系都不会乱。
- 避免写
line-height: 24px或line-height: 150%，它们会脱离当前字号，导致小字时行距过大、大字时文字挤叠 - 根元素设
font-size: 100%（即浏览器默认 16px），再用 rem 控制各级字号，是最稳妥的起点 -
line-height: normal不可靠——它依赖字体和浏览器，默认值在 1.0–1.2 之间浮动，跨设备表现不一致
容器宽度与内边距也要“流”起来
文章主体区域不能写死 width: 1200px，而要用 max-width 加百分比。比如 max-width: 68ch（按字符数限制阅读宽度）或 max-width: 800px 配合 width: 100%，确保窄屏下内容不撑破视口，宽屏下也不无限拉伸。
- 左右内边距用
rem或%，比如padding-inline: 1.5rem，随字号缩放保持视觉留白比例 - 段落间距用
margin-block配合em，如margin-block: 1.5em，让空隙始终与当前文字高度关联 - 避免用固定像素的 margin/padding，否则字号变大时，段间空白会显得过小
用媒体查询微调断点，而非重写排版
媒体查询不是用来“换一套样式”，而是对流式基础做轻量优化。比如在小屏上把行高从 1.6 提到 1.75，提升可读性；在大屏上把最大宽度从 68ch 放宽到 78ch，利用更多横向空间。
立即学习“前端免费学习笔记（深入）”；
- 优先使用
min-width断点，例如@media (min-width: 768px)，符合移动优先逻辑 - 断点数值参考真实设备常用宽度（如 480px、768px、1024px），但更推荐用内容驱动——当段落明显变宽、阅读吃力时再触发调整
- 只改关键变量：字号、行高、最大宽度、内边距，其他继承自基础流式规则，减少冗余
图片与强调元素要服从文字节奏
插图、加粗文字、引用块这些非正文元素，尺寸和位置也得锚定在文字流里。否则字号一变，图片可能撑破容器，标签里的字反而比正文还小。
- 图片设
max-width: 100%和height: auto，确保不溢出，同时用aspect-ratio维持比例 - 、 等内联元素不单独设 font-size，靠继承父级字号，再用 line-height 保持行盒一致
- 引用块或分隔线用
em设高度和边距，比如border-top: 0.125em solid #ccc，让它随文字缩放
