浅谈对px em rem的理解
px:
pc端最常用的的单位，大小固定，不会随窗口的变化而变化
例子：
.box{width:100px; height:100px; font-size: 16px; border:1px solid #000;}
设置此元素的长款各为100px(像素)，边框为1px(像素) 实线 边框为黑色 元素内字体大小为 16px。
em:
em的值不固定，它会随父级元素的改变而改变(继承自父级元素)
例子：
<style>
.father{font-size:15px;}
.son{text-index:2em;}
</style>
<body>
<div class="father">
<div class="son">
这是一个段落的文字
<div>
</div>
</body>
以上代码段设置为文字缩进2em 当父类设置文字大小为15px时，实际缩进了30px(两个字符长度)。
rem:
rem是css3新加入的属性，与em的相同点是都属于相对大小值，与em的不同点是rem是相对于根元素，而em是相对于父级元素。
例子:
<style>
body{font-size:10px;}/*这里使用10px而不用我们常用的14px/16px，是因为10px相对而言比较容易计算，还原度高*/
.div1{font-size:1rem;}
.div2{font-size:2rem;}
<style>
<body>
<div class="div1">这是一段文字</div>
<div class="div2">这是另一段文字</div>
</body>
div1的字体大小为10px;
div2的字体大小为20px;
