移动端适配核心是viewport正确设置+rem基准统一调控，禁用maximum-scale、用em断点、text-size-adjust防护safari，并通过calc兜底旧浏览器。

移动端网页用媒体查询动态调整字体大小，关键不是“写多少断点”，而是让字号变化和视口缩放解耦，避免浏览器强制重排或文字发虚。核心前提是 viewport 设置正确，再配合 rem 基准统一调控，才能真正防失真。

必须先配好 viewport 标签

没这行，所有媒体查询都可能不触发：

• <meta name="viewport" content="width=device-width, initial-scale=1.0"> 要放在 最前面，不能靠 JS 插入
• 不要加 maximum-scale=1.0 或 user-scalable=no，否则会禁用系统字体放大功能，反而导致文字被 Safari 强制模糊渲染
• 确保页面没有其他 meta viewport 覆盖或冲突

用 :root + rem 统一控制全局字号

别在每个选择器里重复写 font-size，而是只改根字号，子元素用 rem 自动响应：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 基础设置：:root { font-size: 16px; }
• 小屏适配：@media (max-width: 48em) { :root { font-size: 14px; } }
• 大屏优化：@media (min-width: 80em) { :root { font-size: 18px; } }
• 断点推荐用 em（如 48em）而不是像素，这样用户调高系统字体时，断点也会同比例偏移，保持逻辑一致

媒体查询里慎用 px/em，优先用 rem

混用单位会导致计算错乱：

• 错误写法：@media (max-width: 375px) { p { font-size: 14px; } } —— 固定像素脱离基准，无法响应系统设置
• 正确写法：@media (max-width: 375px) { :root { font-size: 13.5px; } }，然后正文用 font-size: 1.125rem（即 15.1875px）
• 标题、正文、辅助文字建议分层设置不同 rem 值，比如 h1: 1.75rem、p: 1.125rem、.caption: 0.875rem

旧浏览器兜底与 Safari 特殊处理

iOS Safari 对小字号有主动干预，需额外防护：

• 加 text-size-adjust: 100% 到 html 或 body，禁止它自动放大文本
• 对不支持媒体查询的老机型（如 iOS 8 以下），可结合 font-size: calc(100vw / 7.5) 做降级，但要设最小值：font-size: max(16px, calc(100vw / 7.5));
• 用 Chrome DevTools 的 “Computed” 面板直接查最终生效的 font-size，确认没被更高优先级规则覆盖