核心解决思路是重置小屏断点下的 font-size，优先用 rem 配合根元素缩放与媒体查询；默认 html{font-size:16px}，小屏（如 max-width:480px）提升至 18px，使 rem 自动放大；局部调整可直接覆盖样式；需添加 viewport meta 标签并避免限制用户缩放；推荐用 clamp() 增强弹性，最后务必真机验证。
小屏设备上字体过小，核心解决思路是：在对应断点下重置 font-size，优先使用相对单位（如 rem 或 em），配合根元素缩放或媒体查询主动放大。
用 rem + 媒体查询精准控制字号
保持全局字体可维护性，推荐以 html 根元素为基准，再通过媒体查询在小屏提升根字号，让所有 rem 单位自动放大：
- 默认设
html { font-size: 16px; }（或按设计稿换算） - 在小屏断点（如
max-width: 480px）中增大根字号：@media (max-width: 480px) { html { font-size: 18px; } } - 正文、标题等统一用
rem：如h1 { font-size: 2.5rem; }，此时小屏下实际为2.5 × 18px = 45px
针对特定元素单独放大更灵活
若只需局部调整（如导航文字、按钮字号），直接在断点内覆盖样式，无需动根字体：
@media (max-width: 480px) { .nav-link { font-size: 1.2rem; } }- 对
px字号也可强制覆盖：.btn { font-size: 16px; } @media (max-width: 480px) { .btn { font-size: 18px; } } - 注意避免过度放大导致换行或溢出，可配合
line-height和max-width微调
启用 viewport 缩放保障基础可读性
确保移动端浏览器正确解析视口，否则字体可能被强制缩小：
立即学习“前端免费学习笔记（深入）”；
- HTML 中必须包含：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 移除
user-scalable=no或maximum-scale限制，允许用户双指缩放（辅助阅读） - 避免给
body或容器设固定font-size覆盖系统设置
考虑系统字号偏好（可选增强）
尊重用户系统级字体设置，用 clamp() 实现弹性字号：
-
font-size: clamp(1rem, 2.5vw, 1.5rem);—— 在小屏时随视口宽度增长，但有上下限 - 搭配
prefers-reduced-motion或prefers-color-scheme可进一步适配，但字号主要依赖prefers-font-size（目前支持有限，暂不强依赖）
不复杂但容易忽略的是：先检查是否误用了过小的固定像素值，再确认媒体查询断点是否命中、CSS 优先级是否被覆盖。改完记得在真机或 Chrome DevTools 的设备模拟器中验证实际渲染效果。
