Rem CSS介绍

Rem是指根据根元素字体大小来计算其他元素大小的CSS单位。使用Rem可以实现响应式布局，让网页能够在不同设备上适应不同的屏幕大小。

Rem的定义

Rem的全称是"Root EM"（根据根元素计算的EM值），与EM类似，都是基于字体大小来计算元素大小的单位。不同之处在于，Rem是相对于根元素（标签）而言的，而EM则是相对于父元素而言的。

Rem的特点

1. 适应性强：使用Rem能够实现响应式布局，Web页面可以在不同设备上进行自适应，无需对不同尺寸的设备编写多个CSS样式表。
2. 更加灵活：相对于固定像素单位，Rem单位更加灵活。在不同像素密度的屏幕上表现更为出色。
3. 便捷性高：对于需要进行场景切换，或多标签页切换等动态效果的应用，使用Rem相对于计算其他单位更加方便。

Rem的实现

在实现Rem布局的过程中，需要设置html的font-size属性，以rem为基础写样式。

html {
  font-size: 16px;
}

/* 基于16px计算，设备宽度为400px时，0.5rem的大小为8px */
rem{
  width: 0.5rem;
  height: 0.5rem;
}

/* 使用rem时，元素大小根据html的font-size属性计算 */
div{
  width: 10rem;
  height: 5rem;
}

Rem的兼容性

在兼容性方面，Rem的兼容性非常好，几乎所有的浏览器都支持Rem单位，在实现响应式布局的过程中不会产生兼容性问题。

Rem vs Px

相比px单位，Rem单位更加灵活、便捷， 但在控制精度、兼容性方面因为是较新的单位存在一些局限性。因此，在实际使用中，应根据页面需求以及CSS兼容性等综合考虑进行选择。

参考资料

1. CSS Font-Size: em vs. px vs. pt vs. percent vs. rem
2. [Font-size: em vs. rem vs. % vs. px -   CSS-Tricks](https://css-tricks.com/font-size-     em-rem-px-percentages-  tried-them-all/)