1rem 到 px - CSS

在CSS中，rem是根据根元素（即html元素）的字体大小（即font-size）来设定的。它的具体含义是“相对于根元素字体大小的倍数”。例如，如果根元素的字体大小为16px，则1rem等于16px。

而在实际开发中，设计师和开发者通常更喜欢使用像素（px）作为长度单位。因此，在设计UI时，通常会先以像素为单位确定设计稿的尺寸。这时，我们就需要将像素转换成rem，以便在CSS中使用。

如何将像素转换成rem

假设我们有一个设计稿，其中某个元素的宽度为200px。我们可以通过以下公式将其转换成rem：

200px / 根元素字体大小 = 200 / 16 = 12.5rem

这里的16是默认的根元素字体大小，我们也可以通过在根元素上设置font-size来改变它。

如何在CSS中使用rem

一般来说，我们在CSS中使用rem时，最好将所有的尺寸都转换成rem。这样，在修改根元素字体大小时，所有元素的尺寸都能够按比例变化。

以下是一个使用rem的示例：

html {
  font-size: 16px; /* 默认的根元素字体大小 */
}

body {
  font-size: 1rem; /* 相当于16px */
  margin: 0;
  padding: 0;
}

.container {
  width: 60rem; /* 相当于960px */
  margin: 0 auto;
}

.title {
  font-size: 2rem; /* 相当于32px */
}

在上面的示例中，我们将根元素字体大小设为16px，并将大多数尺寸都设成了rem。这样，在修改根元素字体大小时，所有元素的尺寸都能够自动按比例变化。

总结

• rem是相对于根元素字体大小的倍数，它的具体含义是“相对于根元素字体大小的倍数”。
• 我们可以通过将像素除以根元素字体大小来将像素转换成rem。
• 在CSS中，我们可以使用rem来设置元素的尺寸，以便在根元素字体大小变化时，所有元素的尺寸都能够按比例变化。