HTML段落缩进怎么设置适合手机阅读-html教程-PHP中文网

text-indent: 2em是唯一适合手机阅读的首行缩进写法，因其始终等于当前段落字号，缩进视觉恒≈两字符宽；px/%/rem在双指放大、系统字体放大或高dpi屏下均会失衡，且移动端失效主因是flex/grid布局、首行内联替换元素或富文本强制重置，需配合媒体查询兜底和首段重置。

html段落缩进怎么设置适合手机阅读

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></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 会误匹配。