详细前端rem单位

REM（Root EM）是相对于根元素（html）的字体大小的单位。在使用REM单位时，我们通常会将根元素的字体大小设置为相对于屏幕宽度的百分比值，然后使用REM单位来表示其他元素的字体大小、宽度、高度等。

使用REM单位的好处是可以根据屏幕大小自动调整元素的大小，使得页面在不同设备上都能有良好的显示效果。

下面是一个使用REM单位的示例：

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

body {
  font-size: 1rem; /* 其他元素的字体大小为根元素的字体大小的倍数 */
}

.header {
  font-size: 1.5rem; /* 头部元素的字体大小为根元素的字体大小的1.5倍 */
}

.container {
  width: 20rem; /* 容器的宽度为根元素的字体大小的20倍 */
  height: 10rem; /* 容器的高度为根元素的字体大小的10倍 */
}

在上面的示例中，根元素的字体大小为16px，因此1rem等于16px。其他元素的字体大小、宽度、高度等都是根元素字体大小的倍数。例如，头部元素的字体大小为1.5rem，即24px；容器的宽度为20rem，即320px；容器的高度为10rem，即160px。

通过使用REM单位，我们可以根据屏幕大小自动调整元素的大小，使得页面在不同设备上都能有良好的显示效果