同rem值网页字号不同，如何按页面设置rem基准或默认字号？

嘿，这个问题戳中了rem使用里的常见误区！咱们一步步来拆解解决方案：

先搞懂核心原理 #

首先得明确：rem的基准是根元素<html>的字体大小，而非浏览器全局默认字号（虽然浏览器默认<html>字号通常是16px，但这个值完全可以在页面级单独覆盖）。你遇到的两个页面同rem值显示不同，大概率是其中一个页面的<html>字号被修改过，另一个用了浏览器默认值。

方案1：设置页面专属的rem基准值 #

要实现「页面级的1rem基准」，最简单的方式就是给当前页面的<html>元素直接指定font-size，这样这个页面的所有rem计算都会基于这个值，和其他页面完全独立：

/* 在当前页面的CSS中添加这段代码 */
html {
  font-size: 18px; /* 这里改成你想要的基准值，比如18px = 1rem */
}

举个例子：如果设置html { font-size: 20px; }，那么1rem=20px、0.8rem=16px，整个页面的rem规则都以这个值为准，不受浏览器默认设置或其他页面的影响。

方案2：定义页面默认文本字号（不修改rem基准） #

如果只是想统一页面普通文本的默认字号，不需要改动rem基准，直接给<body>设置字体大小即可：

body {
  font-size: 16px; /* 固定像素值，直接定义默认字号 */
  /* 也可以基于rem继承根元素基准，比如 */
  font-size: 1rem;
}

这种方式下，页面内的普通文本会默认使用这个字号，而rem的基准还是<html>的设置（没修改的话就是浏览器默认的16px）。

进阶：动态调整页面级rem基准 #

如果想要响应式的基准值（比如随视口宽度变化），可以用calc()或媒体查询来设置<html>的字号：

html {
  /* 基础16px，随视口宽度增加动态放大 */
  font-size: calc(16px + 0.3vw);
}

/* 针对大尺寸屏幕单独设置基准 */
@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}

小提醒 #

• 尽量不要用百分比给<html>设置font-size（除非你想基于浏览器默认值缩放），因为百分比是相对浏览器默认字号计算的，还是会受用户浏览器设置影响；直接设固定像素值才能完全掌控页面级的基准。
• 如果用CSS预处理器（比如Sass/Less），可以把基准值定义成变量，方便后续统一调整：

  $base-font-size: 18px;
  html {
    font-size: $base-font-size;
  }
  

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