媒体查询配合rem实现全局缩放的核心是用媒体查询控制html的font-size，再让所有rem值基于该基准等比换算；它不依赖JS，稳定轻量，适合中低频设备断点场景。
媒体查询配合 rem 实现全局缩放，核心是**用媒体查询控制 html 的 font-size，再让所有 rem 值基于这个基准等比换算**。它不依赖 JS，稳定、轻量、可预测，适合中低频变化的设备断点场景。
1. 原理：rem 是根字号的“倍数”，媒体查询是“开关”
rem 的值始终等于 html 元素当前 font-size × rem 数值。比如 html{font-size:37.5px}，那么 2rem 就是 75px；换成 html{font-size:40px}，2rem 就变成 80px —— 所有使用 rem 的元素自动放大。
媒体查询的作用，就是在这个根字号上“按需切换”：
- 当屏幕宽度 ≤ 375px（如 iPhone SE），设 html{font-size:37.5px}
- 当屏幕宽度 ≥ 375px 且 ≤ 414px（如 iPhone 13），设 html{font-size:41.4px}
- 当屏幕宽度 ≥ 414px（如 iPad mini），设 html{font-size:50px}
这样，设计稿若以 375px 宽为基准（1rem = 37.5px → 换算系数为 100），那 16px 文字就写成 font-size: 0.4267rem（16 ÷ 37.5），在更大屏幕上会随根字号一起放大，保持视觉比例。
立即学习“前端免费学习笔记（深入）”；
2. 实际写法：CSS 中直接定义断点 + 根字号
不需要 JS，纯 CSS 即可完成。推荐把断点与根字号映射关系写清楚：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
html {
font-size: 37.5px; /* 默认：适配 375px 设计稿 */
}
<p>@media (min-width: 375px) and (max-width: 414px) {
html { font-size: 41.4px; }
}</p><p>@media (min-width: 414px) {
html { font-size: 50px; }
}注意：所有断点应覆盖连续区间，避免遗漏；font-size 建议用 px 单位（不要用 rem 或 %），确保计算无歧义。
3. 配合预处理器（Less/SCSS）提升可维护性
手动算每个断点的 font-size 容易出错。用 Less 可以抽象变量和函数：
// variables.less
@base-width: 375; // 设计稿宽度
@scale-ratio: 100; // 1rem = 设计稿宽度 / @scale-ratio → 这里即 375/100 = 3.75px per 1rem
<p>// 计算函数：将设计稿 px 转为 rem
.px2rem(@px) {
font-size: unit(@px / (@base-width / @scale-ratio), rem);
}</p><p>// 使用示例
.title {
.px2rem(32); // → font-size: 0.853rem （32 ÷ 37.5）
}这样改一个 @scale-ratio，整个项目的 rem 换算逻辑就同步更新，也方便后期切到 JS 动态方案时复用逻辑。
4. 必须搭配 viewport meta 标签
媒体查询能否正确触发，取决于视口是否真实反映设备逻辑宽度。务必在 head 中声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
否则 iOS Safari 可能以 980px 宽度渲染，媒体查询失效；安卓部分浏览器也可能出现缩放偏差，导致 rem 计算失准。
这套组合不复杂但容易忽略细节，关键是根字号要可控、断点要连续、转换要统一。
