css中rem怎么计算

1、rem是CSS中的一个单位，它代表相对于根元素(html)的字体大小的倍数。它的计算方式是根据根元素的字体大小来确定的。

在CSS中，我们可以通过设置根元素的字体大小来确定rem的基准值。一般情况下，根元素的字体大小默认为16px，即1rem等于16px。如果我们将根元素的字体大小设置为10px，那么1rem就等于10px。

使用rem单位可以带来一些好处。它可以使网页在不同设备上的显示保持一致性，因为rem单位是相对于根元素的字体大小而言的。使用rem单位可以方便地进行响应式设计，只需调整根元素的字体大小，整个页面的布局和元素的大小都会随之改变。

下面是一个示例代码，展示了如何使用rem单位：

html {
  font-size: 16px; /* 根元素的字体大小为16px */
}
h1 {
  font-size: 2rem; /* h1元素的字体大小为2倍的根元素字体大小，即32px */
}
p {
  font-size: 1.5rem; /* p元素的字体大小为1.5倍的根元素字体大小，即24px */
}
@media screen and (max-width: 768px) {
  html {
    font-size: 14px; /* 在屏幕宽度小于768px时，根元素的字体大小为14px */
  }
}

在上面的代码中，我们首先设置根元素的字体大小为16px。然后，我们将h1元素的字体大小设置为2rem，即2倍的根元素字体大小，所以它的字体大小为32px。同样地，我们将p元素的字体大小设置为1.5rem，即1.5倍的根元素字体大小，所以它的字体大小为24px。

我们还可以使用媒体查询来根据屏幕宽度调整根元素的字体大小。在上面的代码中，我们使用@media规则设置了一个媒体查询，当屏幕宽度小于768px时，根元素的字体大小变为14px。这样，整个页面的布局和元素的大小都会相应地缩小。

总结一下，rem单位是相对于根元素的字体大小而言的，它可以使网页在不同设备上的显示保持一致性，并且方便进行响应式设计。我们可以通过设置根元素的字体大小来确定rem的基准值，然后在其他元素中使用rem单位来设置字体大小、边距、宽度等属性。