text-indent: 2em是唯一适合手机阅读的首行缩进写法，因其始终等于当前段落字号，缩进视觉恒≈两字符宽；px/%/rem在双指放大、系统字体放大或高DPI屏下均会失衡，且移动端失效主因是flex/grid布局、首行内联替换元素或富文本强制重置，需配合媒体查询兜底和首段重置。
text-indent: 2em 是唯一适合手机阅读的首行缩进写法，其他方案在双指放大、系统字体放大或高 DPI 屏幕下都会错乱。
为什么 px / % / rem 都不适合移动端
固定像素值（如 text-indent: 32px）在 zoom=150% 或 iPhone「更大字体」开启后，缩进视觉比例严重失衡：本该两字宽，实际变成半字或三字宽；% 基于父容器宽度，在 320px 屏上缩进可能只剩 6px；rem 受根字号影响，若 html { font-size: 62.5% }，2rem 就是 20px，和当前字体完全脱钩。只有 em 始终等于当前段落字号，缩进永远≈两字符宽。
移动端 text-indent 失效的三个高频原因
不是代码写错了，而是渲染链断了：
- 父容器用了
display: flex或display: grid—— 此时p变成 flex item，text-indent不参与布局计算，得改用padding-left: 2em - 段落开头有
<img>、<svg>或换行符 —— 这些内联替换元素会“吞掉”首行盒，缩进锚点消失 - 富文本 CMS 输出了
text-indent: 0 !important—— 必须用更高权重覆盖，比如p:not(.no-indent) { text-indent: 2em !important; }
必须加的兜底媒体查询
iOS Safari 和安卓 Chrome 在「最大可读性」模式下会把 1em 算成 24px 甚至更大，导致 2em 缩进过宽。加这两条能稳住：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
@media (min-width: 320px) and (max-width: 480px) {
p { text-indent: 1.6em; }
}
@media (min-width: 481px) and (max-width: 768px) {
p { text-indent: 1.8em; }
}
别省略 min-width，否则某些 Android WebView 会误匹配。
首段不缩进和段间距怎么配
手机屏首段缩进尤其突兀，必须显式清掉：
-
p:first-of-type { text-indent: 0; margin-top: 0; }—— 清首段缩进+顶边距，避免和标题粘连 -
p { margin: 1.2em 0; }—— 用margin控制段间距，padding会撑高盒子、干扰 flex 对齐 - 如果段落包在
<article>里，优先写article p:first-child，避免被其他p干扰
真正难的不是写对那行 text-indent: 2em，而是确认它在微信内置浏览器、iOS Safari 私密模式、安卓 Chrome 强制缩放下都真生效——打开开发者工具，盯着 Computed 面板看 text-indent 的最终计算值，不是看 Styles 里写了什么。
