1rem 到 16px

在前端开发中，我们经常会说到“1rem”。那么什么是 rem？它与像素有什么关系？在实际开发中应如何使用？下面让我们来一一解答。

1. 什么是rem?

rem是相对于根元素（即HTML元素）的字体大小的单位。每个浏览器都默认将根元素字体大小设置为16px，因此1rem就等于16px。

2. rem与像素的关系

我们知道，像素是屏幕上显示内容的基本单元。在没有放大或缩小的情况下，一个像素对应一个物理像素点。而CSS中的像素（px）则是相对的像素单位，其大小取决于设备分辨率和屏幕尺寸。因此，不同的设备上，同样大小的像素看起来可能会有不同的尺寸。

rem单位则是相对大小单位，它是相对于根元素（HTML元素）的字体大小而言的。因为根元素字体大小默认为16px（这是浏览器的默认值），所以1rem就等于16px。这就意味着如果我们将根元素字体大小设置为16px，则1rem就等于1个CSS像素。

3. 如何使用 rem?

使用rem有几个优点：

1. 可以根据根元素字体大小进行缩放，适应不同屏幕。
2. 便于响应式设计，不需要像素单位转换。
3. 更易于维护和改变大小。

下面，我们将演示如何使用rem来设置字体大小和元素大小。

3.1 设置字体大小

要设置元素的字体大小为16px，可以将其设置为1rem：

body {
  font-size: 16px;
}

h1 {
  font-size: 1rem; /*=16px*/
}

如果我们想要缩小字体大小，例如在移动设备上，可以将根元素字体大小设置为更小的值：

html {
  font-size: 14px; /*在移动设备上将字体大小缩小*/
}

h1 {
  font-size: 1.143rem; /*=16px*/
}

3.2 设置元素大小

我们可以使用rem来设置元素的大小，这样可以使元素的大小随着根元素字体大小的变化而变化。例如，如果我们想要一个元素的宽度为20个CSS像素，可以这样写：

html {
  font-size: 16px;
}

.box {
  width: 1.25rem; /*=20px*/
  height: 1.25rem; /*=20px*/
}

当根元素字体大小变化时，此元素的大小也会按比例进行调整。

4. 总结

rem是相对于根元素字体大小的单位，在不同设备和屏幕上具有一致的尺寸。使用rem可以方便地进行缩放和响应式设计，并且更易于维护和改变大小。在使用rem时，要注意将根元素字体大小设置为16px来确保1rem等于1个CSS像素。