text-indent: 2em 是响应式首选，因 em 单位随字体缩放同步变化、不受根字体干扰；但需配合媒体查询降小屏缩进、重置首段缩进与上边距，并在 flex/grid 中改用 padding-left 或避免误用。
用 text-indent: 2em 是最稳妥的响应式缩进方案，但必须配合媒体查询和语义化约束，否则小屏下缩进过宽、首段误缩、Flex容器内失效等问题会集中爆发。
为什么 text-indent: 2em 是响应式首选
em 单位直接绑定当前 font-size，用户放大字号、系统启用高对比度模式、或页面 zoom 到 150% 时，缩进同步变宽，视觉上始终接近“两字符”；20px 或 2% 在这些场景下要么缩得太紧（小字+大缩进），要么缩得看不见（大字+固定像素）。2em 还能绕过 rem 的根字体干扰——比如夜间模式 JS 动态改了 html { font-size: 12px }，2rem 就会从 32px 突变为 24px，而 2em 始终忠于本段文字的字号。
小屏设备必须降缩进：加 @media 规则
在 375px 宽的 iPhone 屏上，2em 若对应 16px 字体，就是 32px 缩进，占屏幕宽度近 10%，挤压可读区域。不调整就会导致文字被挤到右侧、行末换行异常：
- 在 CSS 中显式写：
@media (max-width: 600px) { p { text-indent: 1.5em; } } - 若正文用了
clamp(14px, 1.2vw, 18px)这类流体字号，text-indent不能直接用clamp，得靠 JS 监听resize动态设 style，但多数项目没必要——1.5em 已覆盖绝大多数小屏阅读习惯 - 别只调缩进：同步检查
line-height和margin，小屏下段间距过大比缩进大更伤阅读节奏
p:first-of-type 必须重置缩进与上边距
中文排版惯例是首段不缩进，且顶部不留空——但 CSS 默认没这个逻辑，全靠手动拦截：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 写死：
p:first-of-type { text-indent: 0; margin-top: 0; } - 注意伪类优先级：如果富文本编辑器输出的
<p></p>带了style="text-indent: 2em !important"，这条规则会被压住，得加!important或改用更具体的选择器如.article-content > p:first-of-type - 别用
:first-child替代：<h2></h2>或<figure></figure>可能在首段前，它会错判
Flex/Grid 容器里 text-indent 失效的应对方式
这不是 bug，是格式化上下文切换的结果：display: flex 下的 <p></p> 默认是 flex item，不再触发块级盒的“首行”概念。强行加 display: block 可能修复，但更可靠的是换思路：
- 对 flex item / grid item，改用
padding-left: 2em——它不依赖首行语义，视觉效果一致，且兼容所有现代浏览器 - 如果该容器语义上确实是“段落流”（比如卡片正文区），就别用 Flex 布局包裹
<p></p>，改用普通<div class="card-body"> + 标准块流 <li>绝对不要给 <code><nav></nav>或<header></header>里的标题加text-indent——那是间距问题，该用margin-left或gap
真正难处理的不是怎么缩进，而是缩进背后的语义边界：text-indent 只属于段落内容本身，一旦它出现在列表项、表格单元格、导航链接里，八成是布局设计出了偏差——这时候修 CSS 不如回退一步，看 HTML 结构是否该用 <blockquote></blockquote>、<aside></aside> 或自定义 class 来表达层级意图。
