px, em 与 rem 的关系

只讨论在CSS中三者的区别和关系。

px

px（像素）是基本的单位，也是绝对单位，另外两个都是相对单位。

em是相对单位，em会继承直接或最近parent级元素的字体大小。

假设Parent级元素的font-size为28px，1em 就等于 28px。

下面的例子中，.parent的字体大小为22px，.child的字体大小为11px:

html

<div class="parent">
	parent
	<p class="child">child</p>
</div>

css

.parent{
	font-size:22px;
}
.child{
	font-size: .5em;
}

除了字体大小,行距（line-height），高度，block元素的宽度也可以使用em表示。

em的其中一个用处是在中文段落中设置首字母缩进：

css

p { text-indent: 2em; }

rem和em相差一个r，即root（根元素）。rem也是相对单位，只不过与html(root根元素)相关。

通常根元素的font-size为16px，那么 1rem 就等于 16px，rem与parent元素无关。

当你改变rem，就有可能影响到em，反过来，em不会影响到rem。

px是最容易使用的单位，通常初学者会使用px写死长度，但在某些情况下长度固定会造成布局缺陷，相比之下，rem和em都是很好的响应式写法。

那么选择em还是rem呢？

我觉得看个人喜好。最重要的是保持一致性，也就是不要既用em又用rem，会造成混乱。

基于rem的改变会影响em的大小，我更偏向于使用 px + rem。

#css