最稳妥方式是用@media媒体查询设html font-size，因其无闪动、兼容好、SSR友好；推荐三档min-width断点：480px/768px/1024px，font-size按14px/16px/18px/20px递增，需从小到大书写并设基础值兜底。
直接用 @media 媒体查询设置 html 的 font-size，是最稳妥、兼容性最好、也最可控的方式。
为什么不用 JavaScript 动态计算？
动态 JS 方案（比如监听 resize 或用 vw）看似灵活，但实际踩坑多：页面初始渲染时 JS 还没执行，rem 元素会先按浏览器默认 16px 渲染，造成闪动；iOS Safari 对 orientationchange 触发不及时；缩放页面或横竖屏切换时容易漏更新；SSR 场景下服务端无法执行 JS，首屏样式错乱。
而纯 CSS 的 @media 无上述问题，浏览器原生支持，渲染即生效，且现代浏览器（包括 iOS 9+、Android 4.4+）对 @media (min-width) 支持非常成熟。
怎么写断点才不翻车？
别照搬设备分辨率列表（比如“iPhone X 是 375px 就设 max-width: 375px”），真实瓶颈是内容可读性和操作可行性。推荐三档实用断点：
立即学习“前端免费学习笔记（深入）”；
-
@media (min-width: 480px)：防小屏文字折行、按钮太挤（覆盖 iPhone SE 横屏等窄屏） -
@media (min-width: 768px)：平板竖屏最小可用宽度，此时可增大字号提升阅读舒适度 -
@media (min-width: 1024px)：桌面端起始，字号可进一步放大，但注意避免在 2K/4K 屏上过大
每个断点的 font-size 值建议按比例递增，例如：
html { font-size: 14px; }
@media (min-width: 480px) { html { font-size: 16px; } }
@media (min-width: 768px) { html { font-size: 18px; } }
@media (min-width: 1024px) { html { font-size: 20px; } }
这样 1rem 在各端分别是 14px / 16px / 18px / 20px，换算直观，设计师也容易对齐。
设计稿是 750px，怎么映射到媒体查询？
很多团队习惯“1rem = 100px”对应 750px 设计稿，但这不是媒体查询的依据——媒体查询响应的是真实视口宽度（document.documentElement.clientWidth），不是设计稿逻辑。你不需要把 750px 折算成某个 max-width 值去写断点。
真正要做的，是反推：在目标设备上，你希望 1rem 等于多少物理像素？比如在 375px 宽手机上，设 html { font-size: 16px; }，那么 1rem = 16px，一个设计稿里标 32px 的标题就写 2rem。这个映射关系由你控制，和媒体查询断点本身无关。
常见错误是强行让 “750px 设计稿 ÷ 100 = 1rem”，然后试图用 font-size: 13.333vw 去拟合——这会导致小屏字号过小（如 375px × 0.1333 ≈ 50px → 1rem = 50px，标题瞬间爆炸），必须配合 clamp() 或降级，反而增加复杂度。
要不要加 orientation 判断？
除非你的产品有强横竖屏差异（比如视频类 App），否则没必要。现代用户行为中，横屏使用比例低，且横屏时视口宽度变大，本就会命中更高一级的 min-width 断点，字体自然变大，体验已足够好。
硬加 and (orientation: portrait) 反而容易漏掉某些 Android WebView 或折叠屏的 orientation 检测异常，还让 CSS 更难维护。专注用 min-width 向上增强，更简洁可靠。
真正容易被忽略的点是：所有媒体查询必须按 min-width 从小到大顺序书写，否则后写的规则可能被前面的覆盖；另外，别忘了给 html 加个基础 font-size（比如 14px），作为没有匹配任何断点时的兜底值。
