媒体查询设置百分比字体后，如何让页面特定区域保持默认字号？

嘿，这个问题我之前也帮人解决过——你遇到的是CSS百分比字号继承的典型陷阱！当你给.subset设置font-size: 100%时，它并不是回到“页面原来的字号”，而是继承了父元素（body/html）已经缩小后的85%字号，所以看起来完全没变化。下面给你几个实用的解决思路：

方案1：使用rem单位（推荐，兼顾灵活性和可控性） #

rem是相对于根元素（html）的字号单位，我们可以通过计算让特定区域的字号还原到全局缩小前的大小：

/* 先定义非移动端的基准字号（通常浏览器默认是16px，这里明确写出来更清晰） */
html {
  font-size: 16px;
}

/* 移动端全局缩小85% */
@media only screen and (min-width: 320px) {
  html, body {
    font-size: 85%; /* 此时1rem = 16px * 0.85 = 13.6px */
  }
}

/* 让特定区域回到原来的16px基准字号 */
@media only screen and (min-width: 320px) {
  .subset {
    font-size: 1.176rem; /* 计算方式：原基准字号 / 移动端根字号 = 16 / 13.6 ≈ 1.176 */
  }
}

方案2：直接使用固定px值（最简单，适合不需要缩放的场景） #

如果你的需求只是让.subset保持某个固定大小，直接写死px值就行：

@media only screen and (min-width: 320px) {
  .subset {
    font-size: 16px; /* 替换成你页面原来的基准字号 */
  }
}

方案3：用CSS变量统一管理（最易维护，适合大型项目） #

通过CSS变量把基准字号抽离出来，后续修改只需要改一处：

:root {
  --base-font-size: 16px; /* 全局基准字号 */
}

html {
  font-size: var(--base-font-size);
}

@media only screen and (min-width: 320px) {
  html, body {
    font-size: calc(var(--base-font-size) * 0.85); /* 全局缩小85% */
  }
  .subset {
    font-size: var(--base-font-size); /* 直接复用基准字号 */
  }
}

为什么原来的规则不生效？ #

再给你理清楚逻辑：你的全局规则把html和body的字号设为85%，这个百分比是相对于浏览器默认字号（通常16px）的。而.subset的font-size:100%是相对于它的父元素（body）的字号，也就是16px*85%=13.6px的100%，结果还是13.6px，自然看不出变化。

内容的提问来源于stack exchange，提问作者lorless