什么是rem？【CSS面试题】

px是绝对长度单位。

em是相对长度单位，相当于父元素（一个元素的父元素是不确定的，em设置一个统计的长度不太合适）。

em的值并不是固定的，em会继承父级元素的字体大小。

rem是CSS3新增的一个相对单位（root em，根em）。

rem:W3C官网描述是“font size of the root element”，即rem是相对于根元素。

rem是相对长度单位，相对于html根元素（相对于统一的html根元素），

所以我们可以设置html根元素的长度大小，然后其他的元素，就可以使用rem这个相对单位，来决定其他元素的长度，所以说rem会用的更加多一点。

html:

<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

css:

<style type="text/css">
	html{
		font-size: 200px;
	}
	.p1{
		font-size: 0.1rem;
	}
	.p2{
		font-size: 0.2rem;
	}
	.p3{
		font-size: 0.3rem;
	}
	.div1{
		width: 1rem;
	}
	.div2{
		width: 2rem;
	}
	.div3{
		width: 3rem;
	}
</style>

每个p标签的字体大小，都会依次的相应的作调整。它是一个相对的单位。

rem设置的是font-size，使用不仅限于font-size。

我们可以设置一个div容器width为1rem（即width:100px）

px,em,rem单位转换工具

http://pxtoem.com/

注：在Chrome下，默认最下字体为12px,可以设置font-size: 625%，其他以此类推。