web开发学习总结之em与rem

1 em

em表示父元素的字号的倍数。(特例：在text-indent属性中，表示文字宽度。)

em为单位的时候，font-size属性是计算后再继承，如box1计算出来是40px。那么里面的box2、box3继承的都是40px。

em单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如width、height、padding、margin、border

width: 30em;
height: 10em;

1个em是多少？要看父盒子的字号。父盒子字号是16px，那么此时这个盒子的真实宽度高度： 480px*160px;
这个属性不好用，是以父亲的字号为基准。很少使用。

2 rem

CSS3中，IE9开始兼容一个单位叫做rem。r就是root。
这个单位也是倍数，是html标签字号的倍数。不看父亲，一律看html标签。

html标签中，font-size设置为16px。那么全页面都是以16px当做基准，也就是说1rem=16px。
em和rem区别非常大。em看父亲的字号，rem看html标签的字号。

设计师给你一个手机网页的设计图，这个设计图一定是定宽的。
比如这个设计图是600px宽度，logo 120px ， nav 弹性的 ， btn 120px
此时有经验的前端开发工程师，一定不会用px当做单位，会进行计算。
比如html标签的font-size:16px; 那么120/16 = 7.5 ,所以logo的width就是7.5rem。

header .logo{
	width: 7.5rem;
	height: 2.5rem;
}

这么做的好处是，可以配合媒体查询，来进行显示效果的增强，让大屏幕用户看到的东西真实的变大：

@media(min-width:320px){
	html{
		font-size: 14px;
	}
}
@media(min-width:380px){
	html{
		font-size: 16px;
	}
}
@media(min-width:440px){
	html{
		font-size: 18px;
	}
}