em与rem的使用和详解

em与rem都是相对长度单位，前者相对于当前对象内文本的字体尺寸，后者相对于根元素的字体尺寸

em

css

	.box{width: 10em; height: 10em;}

html

	<div class="box"></div>

任意浏览器的默认字体都是16px，所以10em被浏览器计算为了160px
为了简化换算，我们可以在css选择器中声明

font-size: 62.5%;

这样1em = 10px;

需要注意的是，如果使用em声明字体大小
css

	div{ border: 1px solid;}
	.bbox{ font-size: 1.6em; width: 10em; height: 10em;}
    .sbox{ font-size: 1.6em; width: 10em; height: 10em;}

html

    <div class="bbox">
        <div class="sbox"></div>
    </div>

效果

父盒子的字体大小的1.6em为16px * 1.2 = 19.2px
而子盒子的字体大小由于继承了父盒子的字体大小，它的1.6em实际是19.2px * 1.2 = 23.04px

rem

rem是css新增的相对长度单位，使用它设置字体时，不会出现上述存在的问题，因为他始终都相对于html根元素的大小

关于使用

rem几乎包括了你布局的每一个部分，无论是width，height，margin，padding，border，简单来说，一切可扩展的，根据浏览器大小缩放的任何尺寸，都应该使用rem单位
当使用rem单位创建统一可扩展的设计时，媒体查询也应该是rem单位，这样无论户浏览器的字体大小，媒体查询都会对它作出反应和调整布局

em不同于rem，它取决于一个font-size的值，所以em更适合用在一个特定元素上，以此来保持它的可扩展性