rem单位 - 前端学习教程_ 前端_前端开发

rem是CSS 3中新增的一种相对长度单位。当使用rem单位时，根节点<html>的字体大小（font-size）决定了rem的尺寸。

rem单位类似于em单位，em单位表示父元素字体大小，不同之处在于，rem的基准是相对于<html>元素的字体大小。下面通过代码对比em和rem的区别。

（1）使用em单位，示例代码如下。

div {
 font-size: 12px;
}
div > p {
 width: 10em;    /* 结果为120px */
 height: 10em;   /* 结果为120px */
}

上述代码中，em单位是相对于父元素计算的，子元素的1em等于12px，因此10em就相当于120px。

（2）使用rem单位，示例代码如下。

html {
 font-size: 14px;
}
div {
 font-size: 12px;
}
div > p {
 width: 10rem;    /* 结果为140px */
 height: 10rem;   /* 结果为140px */
}

上述代码中，rem单位是相对于<html>元素计算的，因此10rem的结果为140px。

与em单位相比，rem单位的优势在于，只通过修改<html>的文字大小，就可以改变整个页面中的元素大小，使用起来更加方便。