必须用rem而非em或px，因em依赖父级字号易嵌套失控，px无法响应视口变化，而rem只锚定html的font-size，一改全等比缩放，如html设20px时1.5rem恒为30px，清晰可控。
媒体查询配合 rem 调整 H5 移动端字号，核心是让根元素 html 的 font-size 随屏幕宽度阶梯式变化，再让所有文字用 rem 单位去承接这个基准——这样改一个地方，全页字体等比缩放，不乱套。
为什么必须用 rem 而不是 em 或 px
em 依赖父级字号，嵌套多层后容易失控；px 是绝对单位，无法响应视口变化；而 rem 始终只看 html 的 font-size，只要它变，所有 rem 值就按比例缩放。比如 html { font-size: 20px; }，那么 1.5rem 就恒等于 30px，清晰可控。
媒体查询设置 html 字号的实用写法
以设计稿宽 750px、均分 15 份为基准（即每份 50px），不同屏幕宽度对应不同根字号：
-
@media (min-width: 320px) { html { font-size: 21.33px; } }（320 ÷ 15） -
@media (min-width: 375px) { html { font-size: 25px; } }（375 ÷ 15） -
@media (min-width: 414px) { html { font-size: 27.6px; } }（414 ÷ 15） -
@media (min-width: 750px) { html { font-size: 50px; } }（750 ÷ 15，即设计稿基准）
注意：这些断点不必覆盖所有机型，选主流宽度（如 320、360、375、414、480、750）即可，小屏保可读性，大屏保展示力。
字体大小在 CSS 中怎么写才合理
所有文字层级统一用 rem，避免混用 px 或 em：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 标题：
h1 { font-size: 2.4rem; }（对应设计稿 120px ÷ 50 = 2.4rem） - 正文：
p { font-size: 1.2rem; }（对应设计稿 60px ÷ 50 = 1.2rem） - 小字说明：
.caption { font-size: 0.96rem; }（对应 48px）
line-height 推荐用无单位数值（如 1.4），它会自动随 font-size 缩放，不用写 rem。
更平滑的替代方案：clamp() + rem
如果觉得媒体查询切换有“跳变感”，可用 clamp() 实现连续过渡：
h2 { font-size: clamp(1.25rem, 4vw, 2rem); }- 含义：最小 1.25rem，最大 2rem，中间按 4vw 线性插值，视口越宽字号越自然增大
- 适合标题类大字，对兼容性有要求时需加 fallback（如先写
font-size: 1.5rem;再覆盖）
现代安卓 Chrome、iOS Safari 15+、Edge 100+ 均已支持，IE 不支持，但 H5 场景基本可忽略。
