px em rem区别

html:

   <div class="px">
    <span class="f10">f10</span><br>
    <span class="f16">f16</span>
  </div>
  <div class="rem">
    <span class="rem1">rem1</span><br>
    <span class="rem2">rem2</span>
  </div>
  <div class="em">
    <span class="em1">em1</span><br>
    <span class="em2">em2</span>
  </div>

css:

<pre>
	*{margin:0;padding:0;font-family:"Microsoft Yahei";}
	.px,.em,.rem{padding:20px;margin-top:20px;}
	
	.px{background:#ccc;}
	.px .f10{font-size:10px;}
	.px .f16{font-size:16px;}

	.em{font-size:10px;background:#999;}
	.em .em1{font-size:1em;}
	.em .em2{font-size:1.6em;}

	html{font-size:62.5%;} /* 10px */
	.rem{background:#666;}
	.rem1{font-size:1rem;}
	.rem2{font-size:1.6rem;}
</pre>