设置默认 rem css

当我们开始进行页面开发时，我们通常需要设置 rem 值以便能够自适应不同屏幕的大小。这篇文章将向您介绍如何设置默认的 rem 值，以便您可以更加简洁地编写 CSS，而不用每次都计算 rem 值。

计算 rem 值的公式

首先，让我们先回顾一下计算 rem 值的公式：

rem = px / 16

其中，px 是像素值。默认情况下，1rem 等于 16px。

例如，如果您想将一个宽度为 200px 的元素设置为 12.5rem，您可以使用以下代码：

.element {
  width: 12.5rem; /* 200px / 16 = 12.5rem */
}

设置默认 rem 值

我们可以使用以下代码来设置默认的 rem 值：

html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  font-size: 1.6rem; /* 16px */
}

在这个例子中，我们将根元素的 font-size 设置为 62.5%，因为默认情况下，根元素的 font-size 是 16px。使用 62.5% 可以让我们将 16px 简化为 10px。然后，我们将 body 的 font-size 设置为 1.6rem（16px），以便在需要时使用 rem 单位进行指定元素的大小。

使用此设置后，我们可以在 CSS 中使用更加简洁的代码来设置元素的大小，例如：

.element {
  width: 20rem; /* 200px */
}

在需要时，我们只需要将像素值除以 10 就可以得到 rem 值。

结论

通过设置默认的 rem 值，我们可以更加方便地编写 CSS。我们只需要将像素值除以 10 就可以得到相应的 rem 值，而不用每次都进行计算。同时，我们也可以避免使用像素值进行样式设置，以便能够实现更好的自适应。