如何不使用:root媒体查询规则实现正常响应式字号效果

问题1：该媒体查询规则的作用 #

• rem单位的计算基准是:root（即html元素）的font-size，浏览器默认根字号为16px。这条@media (min-width: 50em) { :root { font-size: 22px; } }规则的作用是：当视口宽度大于等于50em（通常对应800px及以上的大屏设备）时，将根元素字号从默认的16px提升到22px。
• 你给p、h1~h6等元素设置的calc(100% + 对应vw)规则中，100%是继承自当前元素父级的字号，最终继承的就是根元素的字号，所以大屏下根字号提升后，所有文本的计算字号都会同步变大，就是你看到的「保留规则时字号正常」的效果。删除这条规则后，根字号始终是默认的16px，calc出来的文本字号自然就会变小。
• 补充说明：你给文本元素先设置的1.1rem/2rem等rem字号规则，会被后面写的calc规则覆盖，属于无效代码。

问题2：不使用该媒体查询实现相同效果的方案 #

推荐两种兼容性好、更易维护的方案：

方案1：使用clamp()函数定义动态字号 #

直接用clamp(最小值, 动态计算值, 最大值)替代原来的calc写法，无需依赖根字号的媒体查询，自动适配不同屏幕尺寸：

/* 示例：根据你的需求调整数值即可 */
p { font-size: clamp(16px, calc(15px + 0.2vw), 24px); margin-bottom: .7rem; }
h1 { font-size: clamp(24px, calc(20px + 1.2vw), 40px); margin-bottom: .2rem; }
h2 { font-size: clamp(20px, calc(18px + 1vw), 36px); margin-bottom: .2rem; }
/* 其余h3~h6同理，按需调整三个参数即可 */

clamp会自动保证字号不会小于最小值、不会大于最大值，中间区间随vw动态变化，完全覆盖你原来小屏适配、大屏字号足够的需求。

方案2：将根字号设置为动态值 #

直接给:root设置动态字号，后续所有文本元素直接用rem单位定义即可，不用每个元素都写calc：

/* 根字号自动在16px到22px之间随屏幕宽度变化，完全替代原来的媒体查询 */
:root {
  font-size: clamp(16px, calc(12px + 1vw), 22px);
  /* 其余原有css变量保留 */
}
/* 后续文本直接用rem即可，不需要再写calc */
p { font-size: 1.1rem; margin-bottom: .7rem; }
h1 { font-size: 2rem; margin-bottom: .2rem; }
/* 其余元素同理 */

这种方案代码更简洁，全局字号统一调整也更方便。

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