CSS Chrome对body标签上的rem字体大小不起作用

在本文中，我们将介绍CSS中Chrome浏览器不遵循在body标签上设置的rem字体大小的问题，并提供解决示例。

阅读更多：CSS 教程

问题描述

当我们使用相对单位rem设置字体大小时，通常会希望字体大小相对于根元素的字体大小来进行计算。在绝大多数浏览器中，包括Chrome，都会按照这种方式来计算字体大小。然而，在某些情况下，我们会发现Chrome浏览器不会按照预期来应用rem字体大小，特别是在设置在body标签上时。

问题解决

解决方法一：重新设置根元素的字体大小

这是最常用的解决方法之一。由于rem单位是相对于根元素(html)的字体大小来计算的，我们可以通过重新设置根元素的字体大小来解决问题。例如，如果我们希望10rem等于16px，我们可以在CSS中进行如下设置：

html {
  font-size: 16px;
}

这样，Chrome浏览器将根据新的根元素字体大小来计算rem单位的字体大小。

解决方法二：使用vw单位代替rem单位

如果我们不想重新设置根元素的字体大小，我们还可以考虑使用vw（视口宽度的百分比）单位来替代rem单位。vw单位根据视口宽度来计算字体大小，而不是根元素的字体大小。例如，如果我们希望字体大小在视口宽度为1000px时为16px，我们可以进行如下设置：

body {
  font-size: 1.6vw;
}

这样，字体大小将根据视口宽度进行自适应，并在不同设备上保持一致。

解决方法三：使用JavaScript动态设置字体大小

如果我们想要更加灵活地控制字体大小，我们可以使用JavaScript来动态设置字体大小。我们可以在页面加载时计算并设置根元素的字体大小，以保证rem单位的字体大小按照我们的期望生效。下面是一个示例：

window.onload = function() {
  var rootFontSize = window.innerWidth / 10;
  document.documentElement.style.fontSize = rootFontSize + 'px';
};

这样，根元素的字体大小将根据视口宽度进行动态调整，以确保我们在使用rem单位时能够得到正确的字体大小。

总结

在本文中，我们介绍了CSS中Chrome浏览器不遵循在body标签上设置的rem字体大小的问题，并提供了几种解决方法。我们可以重新设置根元素的字体大小、使用vw单位代替rem单位，或者使用JavaScript动态设置字体大小来解决这个问题。根据具体的情况，选择适合的解决方法，可以确保我们在Chrome浏览器中得到正确的字体大小。