移动端字体过小因默认字号未适配屏幕密度与视口宽度；应采用rem+媒体查询分段调节html根元素字体大小，结合vw等相对单位实现动态响应式缩放。
移动端字体太小，核心是默认字号没适配屏幕密度和视口宽度。用媒体查询配合相对单位（rem、em、vw）动态调整，比固定像素更可靠。
用 rem + 媒体查询分段调节基础字号
根元素 html 的字体大小决定所有 rem 单位的基准。在不同屏幕宽度下修改它，就能批量缩放文字：
- 小屏（
- 主流手机（375px–414px）设为 16px，接近系统默认
- 大屏或折叠屏（≥414px）设为 18px，提升宽松感
示例：
@media screen and (max-width: 374px) { html { font-size: 14px; } }
@media screen and (min-width: 375px) and (max-width: 413px) { html { font-size: 16px; } }
@media screen and (min-width: 414px) { html { font-size: 18px; } }
之后所有 p、h2 等用 rem 定义，比如 font-size: 1.125rem;（即 18px @16px 基准），会随根字号自动缩放。
立即学习“前端免费学习笔记（深入）”；
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
用 vw 单位做平滑响应式字体
适合标题等需要连续变化的场景。1vw = 视口宽度的 1%，让字号随屏幕线性增长：
-
font-size: clamp(1.125rem, 4vw, 1.5rem);是推荐写法：设定最小值、理想值、最大值 - 例如
h1 { font-size: clamp(1.5rem, 5vw, 2.25rem); }，小屏不小于 24px，大屏不超过 36px，中间按宽度比例过渡
注意：iOS Safari 旧版本不支持 clamp，可加 fallback：font-size: 1.5rem; font-size: clamp(...);
别忽略 viewport 和用户缩放权限
再好的字体逻辑，若页面被强制缩放也会失效：
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">中user-scalable=yes保留（除非业务强要求禁用） - 避免设置
maximum-scale或minimum-scale，否则用户无法手动放大 - 测试时用真机双指 pinch 手势验证是否可缩放，特别是 iOS 微信内嵌浏览器
补充：行高与字重同步优化阅读体验
光调字体大小不够，还需配合排版细节：
- 正文行高建议 ≥ 1.5，小屏可到 1.6～1.7，增加字符垂直空间
- 避免使用过细字重（如 font-weight: 100/200），移动端渲染易发虚，优先选 400～600
- 中文慎用
font-smooth或-webkit-font-smoothing，新版 Safari 已弃用，且可能引发渲染异常
基本上就这些。关键不是堆砌查询条件，而是抓住“根字号控制全局 + 视口单位补充弹性 + 保留用户控制权”三条主线。
