px 、em、rem的关系

• px

总所周知的是px,俗称像素，固定大小，就不废话了

• em 

em单位的名称为相对长度单位，它是用来设置文本的字体尺寸的，它是相对于当前对象内文本的字体尺寸；一般浏览器默认16px，就是说如果不设置，那么1em=16px;  且 em 是相对于父级元素的单位，会随父级元素的属性（ font-size 或其它属性）变化而变化，比如如果父元素的font-size为12px,那么子元素的的font-size的1em就是12px,2em就是24px.如下

//父元素
div{
	font-size: 12px;
}
//子元素
p {
    font-size: 2em;//当前font-size:24px
    height: 2em;//height:48px
	background: orangered;
	width: 2em;//width:48px
	margin: 1em;//margin: 24px;
}
为什么宽高和margin不对呢，其实子元素的除了font-size继承父元素的，其他的需要用到em的都是根据自身来计算的

注意：如果继承的属性值通过计算小于12px,那么获得的值就是12px。

• rem

 与em不同的是，rem不是根据父元素，而是根据根元素，如下

html{
	font-size: 14px;
}
span{
    font-size: 2rem;//font-size: 28px;
	display: block;
	float: left;
	width: 3rem;//width:42px;
	height:3rem;//height:42px;
	background: darkblue;
	margin: 1rem;//margin: 14px;
	color: red;	
}
和em不同的是。rem的所有值都和根元素的font-size直接关联

注意：计算的的值不能小于12px.否则直接是12px

来源：oschina

链接：https://my.oschina.net/u/4151902/blog/3176154