css3中的rem怎么用

什么是rem

在CSS3中，引入了一个新的单位rem，rem的全称是root em，即根em。与em不同的是，em是相对于父元素来说设置字体大小的，而rem是相对于根元素HTML来设置字体大小的。这意味着如果设置一个HTML根元素的大小，那么所有的元素都将使用该大小，而不是相对于其父元素。

因此，使用rem代替像素或em作为单位，可以使网站在不同宽度和设备上具有更好的响应式设计能力。虽然在低版本的IE浏览器中不支持rem单位，但可以通过使用Polygon Fit method 或 Respond.js 等工具解决。

rem的使用方法

设置html的字体大小

在使用rem前，需要先设置html的字体大小。通常情况下，我们会将值设置为16px或者10px。为了方便计算，在此我们使用16px的大小进行设置：

html {
  font-size: 16px;
}

使用rem进行宽度、高度、字体大小的设置

在设置元素的宽度、高度和字体大小时，直接使用rem作为单位即可。例如，我们想要将某个元素的宽度设置为100px，则可以如下设置：

.box {
  width: 6.25rem; /* 100/16 = 6.25 */
}

当然，像上面这样直接计算数值是比较困难的。可以通过一些在线转换工具来计算，例如：https://www.pxtoem.com/。

rem与响应式设计

使用媒体查询

使用rem进行响应式设计的一种方式是，通过媒体查询来设置不同尺寸下html字体的大小。例如，在窗口宽度小于800像素的时候，将html字体大小设置为14px：

@media screen and (max-width: 800px) {
  html {
    font-size: 14px;
  }
}

通过这样的方式，可以在不同尺寸的设备上设置相应的字体大小，保证网站在不同设备上都能够有良好的阅读体验。

使用CSS函数calc()

另一种使用rem进行响应式设计的方式是使用CSS函数calc()。calc()函数可以计算不同单位相加、相减、相乘、相除的结果，并返回一个新的计算后的值。

例如，在设置元素宽度时，结合vw单位和rem单位来使用，即根据视口大小来动态调整元素的宽度。下面的示例中，在窗口宽度小于800px的设备中，每个元素的宽度为视口宽度的10%，高度为3rem：

.box {
  width: calc(10vw + 0.5rem);
  height: 3rem;
}
@media screen and (max-width: 800px) {
  html {
    font-size: 14px;
  }
  .box {
    width: calc(10vw + 0.35rem);
  }
}

通过上述方式，我们可以根据视口大小来动态调整元素的大小，而不必担心在不同设备上出现布局问题。

总结

本文通过介绍rem的使用方法以及如何使用rem进行响应式设计，希望读者可以更好地应用rem单位来开发具有良好响应式设计能力的网站。同时，值得注意的是，rem单位不是万能的，需要结合具体场景进行灵活的使用，在不同设备和视口上进行相应的调整。