移动端字体应动态缩放并守住16px可读底线，通过媒体查询分层设断点（320px/375px/414px/768px/1024px），配合clamp()实现流体缩放，再以viewport和text-size-adjust确保生效。
移动端字体过小，核心是让字号随屏幕宽度动态缩放，同时守住可读底线——不能太小（低于16px难看清），也不能太大（挤占空间或失衡）。媒体查询是基础手段，但单靠它不够平滑，需配合限制与分层策略。
设定合理断点，按设备宽度阶梯调整
断点别凭空瞎猜，优先参考真实设备常见宽度：320px（iPhone SE）、375px（iPhone 8/12 mini）、414px（iPhone Plus/12 Pro Max）、768px（iPad）、1024px（大屏平板）。用 min-width 从窄到宽递进设置，避免样式覆盖冲突：
-
html { font-size: 16px; }—— 默认兜底，所有设备保底值 @media (min-width: 375px) { html { font-size: 17px; } }@media (min-width: 414px) { html { font-size: 18px; } }-
@media (min-width: 768px) { html { font-size: 19px; } }—— 平板设固定值，防过度放大 -
@media (min-width: 1024px) { html { font-size: 20px; } }—— 桌面端微增提升舒适度
关键文本分层处理，不一刀切
标题、正文、辅助文字对可读性要求不同，应各自定义媒体查询规则：
-
标题（h1–h3）：用较大字号区间，例如
@media (max-width: 414px) { h1 { font-size: 22px; } } -
正文段落：强调最小可读性，如
@media (max-width: 375px) { p { font-size: 16px; } }，确保不低于16px -
按钮、标签、提示语：可用稍小字号但加粗或高对比，例如
@media (max-width: 320px) { .hint { font-size: 14px; font-weight: 600; } }
搭配 clamp() 做流体兜底（现代浏览器推荐）
媒体查询是离散切换，clamp() 能实现连续缩放，两者互补。为防小屏缩得太小，必须设下限；防大屏撑开，也要设上限：
-
.title { font-size: clamp(20px, 5.2vw, 36px); }—— 小屏不小于20px，大屏不超过36px，中间按5.2%视口宽度线性变化 -
p { font-size: clamp(16px, 3.8vw, 20px); }—— 正文更保守，保证小屏始终清晰 - 旧浏览器不支持 clamp()？就用上面的媒体查询做降级，CSS 会自然忽略不认识的函数
别漏掉 viewport 和系统干预项
媒体查询生效的前提是页面正确识别视口。这两项必须写在 里：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">- 加 CSS 锁定微信等App的自动放大：
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }，iOS 微信尤其依赖这个 - 安卓微信部分版本需额外调用 WeixinJSBridge，但媒体查询+text-size-adjust 已覆盖绝大多数场景
