text-indent: 2em 是唯一能跨屏保持比例的方案，因其基于字体大小动态计算，适配缩放、高dpi及可访问性设置，而px/%/rem均无法兼顾；需注意flex/grid中display被覆盖导致失效，须显式设为block或改用padding-left: 2em。
text-indent: 2em 是唯一能跨屏保持比例的方案
直接用 text-indent: 2em，别碰 px、% 或 rem。因为 em 是相对于当前字体大小计算的：16px 字号下 ≈ 32px，刚好两字宽；用户放大字体或系统 zoom 到 150% 时，缩进自动等比放大，视觉上仍是“两个汉字位置”。而 32px 在高 DPI 屏上会变小，2% 在 320px 宽屏下只剩约 6px，远不够一字符。
移动端双指放大后缩进异常变大？这是浏览器在帮你可访问性适配
iOS Safari 和安卓 Chrome 在检测到用户双指放大或开启「更大字体」时，会主动重算 em 值——这不是 bug，是 WCAG 合规行为。但极端场景下（比如系统设为「最大可读性」），2em 可能撑到 4em 宽，首行明显溢出。
- 不退回到
margin-left或padding-left：它们破坏text-align: justify对齐逻辑，且固定像素在缩放下完全失衡 - 加媒体查询兜底：
@media (max-width: 480px) { p { text-indent: 1.6em; } }，窄屏下略收一点，避免挤出视口 - 真要强控上限，可用
clamp(1.6em, 2em, 2.2em)，但注意 Safari 15.4+ 才支持
Flex/Grid 容器里 text-indent 突然失效？先看 computed display
常见现象：桌面端好好的，嵌进 Vue/React 组件或卡片布局后，段落缩进消失。根本原因是 text-indent 只对块级盒（block formatting context）生效，而 flex 或 grid 容器会让子 p 的 display 被覆盖为 flex-item 或 grid-item，首行盒不生成，属性直接被忽略。
- 打开开发者工具 → Computed 面板 → 查
display是否还是block，text-indent值是否非零 - 显式重置：
p { display: block; text-indent: 2em; }，别依赖浏览器默认 - 若父容器必须是
flex，改用padding-left: 2em（单位仍用em），并确保父容器box-sizing: border-box
首段不缩进、末段去边距这些细节，不会自动发生
浏览器默认给 p 设了 margin: 1em 0，但不会自动判断“这是导语就该取消缩进”。你得手动清：
- 首段清除缩进和顶边距：
p:first-of-type { text-indent: 0; margin-top: 0; } - 末段只清底边距：
p:last-of-type { margin-bottom: 0; } - 如果段落在
.article里，优先用.article p:first-child，避免被其他p干扰
真正难的不是写对那行 text-indent: 2em，而是确认它在表格单元格、SSR 渲染后的 HTML、打印预览、富文本编辑器输出里都按预期工作——每个环境都可能悄悄绕过这个属性。动手前先盯紧 Computed 面板，比反复调数值管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
