rem是什么意思（什么是rem？——一个基于根元素字体大小的相对单位）

什么是rem？——一个基于根元素字体大小的相对单位

随着移动设备的兴起，响应式设计已经成为了设计师们必须要面对的一个挑战。为了适应不同设备的屏幕大小和分辨率，我们需要寻找一种替代像素单位的方案，rem单位就是为此而生。

rem的全称是root em，它的定义基于根元素字体大小。如果根元素的字体大小（通常是网页body标签中定义的font-size）为16像素，那么1rem就等于16像素。如果根元素的字体大小是20像素，那么1rem就等于20像素。也就是说，1rem的大小是相对于根元素字体大小而言的。

rem的优点是它能够实现页面元素与根元素字体大小的分离。用rem来定义页面元素大小，即使根元素字体大小改变，也能够保证页面元素的大小不变。这一优势特别适用于响应式设计，因为根据不同设备屏幕大小和分辨率，可以设置不同的根元素字体大小来实现适应性布局。

除了相对单位em以外，rem还有一个显著的优势是它的计算相对简单。相比于em单位，它的计算相对于根元素，不容易受到层级关系的影响，按下面的方式计算即可：

要将像素值转为rem值，只需要将像素值除以根元素字体大小，即 rem = px/root font-size；

如果你还不知道如何设置根元素字体大小，可以参考下面的代码：

html { font-size: 62.5%;}

body { font-size: 1.6rem; }

这里设置了html的字体大小为62.5%，这是为了让1rem等于10像素，便于计算。body的字体大小设置为1.6rem（即16像素），这样所有元素的大小都可以相对于根元素的字体大小而言。

除了响应式设计，rem在一些特殊情况下也很有用。例如，当网站需要支持多语言版本时，用rem来定义元素大小可以避免不同语言字体大小不同所产生的影响。另外，如果网站需要使用品牌字体，但该品牌字体在不同设备上效果不佳，可以使用rem来实现字体大小的适应性缩小或放大。

总的来说，rem是一个非常有用的相对单位，它的优点在于可以实现页面元素与根元素字体大小的分离，从而实现更加自适应和灵活的布局。通过灵活地运用rem单位，可以帮助设计师们更好地适应不同屏幕大小和分辨率下的设计需求。