css to rem

CSS的rem是指相对单位，表示相对于根元素(通常为HTML元素)的字体大小而言的长度单位。rem的全称是“root em”，翻译为“根em”，它是CSS3新增的一个单位类型。

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

/* 使用rem单位 */
.nav {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

在上述代码中，我们首先将HTML根元素字体大小设置为16px，然后使用1.5rem作为.nav元素的字体大小。这样，.nav的字体大小为16px * 1.5 = 24px，即1.5rem = 24px。

相比于其他的长度单位，rem的特点是相对稳定。其他单位没有办法维护一个恒定的比例关系，可能会因为视窗大小或者父元素大小的改变而出现变化，而rem单位则不受这些影响。

/* 在媒体查询中实现响应式字体大小 */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 12px;
  }
}

在以上的代码中，我们使用媒体查询实现了在不同视窗大小下，HTML根元素字体大小的更改。当视窗宽度不大于768px时，根元素字体大小为14px；当视窗宽度不大于480px时，根元素字体大小为12px。此时，我们可以在网页中使用rem单位，来保证字体大小的相对稳定，无论视窗大小如何变化。