font-size:px&em&rem
- 1 min在前端开发的过程中，对于font-size这个属性，我们最常用的单位值就是px了。但是对比一些国外的大站，经常会发现他们的font-size单位很少用px，大部分都使用em，还有一部分使用rem。
那么，问题来了。
这三种单位究竟有什么区别呢？又该怎么合理的运用呢？
######先来说px
在PC时代的开发中，我们一直都用px作为字体单位，似乎也没出现过什么问题。但是在规范当中px其实并不是一个绝对的单位。在页面显示中，其实px也是个相对单位，是相对于屏幕的分辨率的。
举个🌰：
假设我有个1200*768的屏幕，屏幕的横向宽度是1200px，也就是说，在这个屏幕的x方向上，有1200个像素点，如果不算字间距的话，可以放100个12px大小的字。那么假设这个屏幕的物理宽度是1200mm，也就是说在这个屏幕中1px=1mm，简单粗暴的把显示长度和物理长度做了对应，那么一个12px的字，在这个屏幕上，其物理宽度也应该是12mm。
那么如果，我的屏幕分辨率变成了2400*1536，也就是分辨率高了一倍，那么一个12px，应该要怎样显示？
根据观察，我们会发现这个12px的字体，不会再像在1200*768的屏幕中那样，占一个12mm*12mm的位置了，而是变成占一个6mm*6mm的大小的位置，这就说明了px这个单位，其实并不是一个绝对单位，而是一个相对于屏幕分辨率的相对单位。
这里说明一下：
所谓的绝对，是类似于cm这种单位，也就是无论放到什么地方，1cm就是1cm，这个单位表示的度量不会改变，在这里称为绝对
######再来说说em
1em一般会被认为是一个默认字号的大小，那么一个默认字号是多少呢？
在所有规范浏览器中，一个默认字号的大小都是16px，也就是说，在没有任何css设定的情况下1em=16px。
再来继续说em，有了上面px的铺垫，我们大概也能猜到em其实也是一个相对单位。px相对的参考值是屏幕的分辨率，而em相对的参考值，则是父级元素的字号大小。
举个🌰：
假设我现在的一个页面上，什么css都没有，那么我的这个页面中1em=16px是成立的，也就是说在body元素中的所有子元素，如果其css设置font-size:1em;，那么其值应该是16px。
然后，我在页面上添加了两个div，变成了这样：
<body>
<style>
.wrap {
font-size: 2em;
}
.inner {
font-size: 1em;
}
</style>
<div class="wrap">
Wrap
<div class="inner">
Inner
</div>
</div>
</body>
那么这个结构的现实中，wrap和inner的字体大小，应该是多少px呢？
经过测试，我们可以看到,wrap和inner的字号大小是一样的，可是这两个div的font-size设置是不一样的啊？这是怎么回事儿？
这就要再回到上面说的em的相对参考值，也就是父级元素的大小。
也就是说wrap里面的字号现在是2*16px=32px，而inner里的字号是1*32px=32px。
经过上面这一大通废话，现在总算弄清楚了px和em的区别，但是既然有了px，又为什么要用em呢？
这又要说回来，px是相对屏幕分辨率的一个单位，也就是说，如果我在一个页面中，想给所有文字的大小都变大一倍，那么我就要把所有设置font-size地方的值，都重新乘以2，才能够实现。
如果用em呢？那我只需要在一开始，在body上，设置一个font-size，那么body下面的所有设置font-size单位为em的元素，都会跟body保持一个比例，这时，我只需要修改body的font-size就可以了。
######最后再来说说rem
rem和em其实是类似的单位，只不过是rem多了一个r而已，那么这个r，究竟是做什么用的？
从上面的em可以了解到，其是一个相对父级元素的单位，如果嵌套层级比较多，恰好一个dom结构又经手了很多人之后，其中em的继承关系很难弄清楚，所以在css3中，新加了个rem单位，作为em的强力补充。
rem是一个相对根节点的单位，使用rem作为单位的话，其值都是相对于html节点的字号大小的值，再来看看上面那个栗子：
<body>
<style>
.wrap {
font-size: 2rem;
}
.inner {
font-size: 1rem;
}
</style>
<div class="wrap">
Wrap
<div class="inner">
Inner
</div>
</div>
</body>
这次wrap和inner的字号不一样了。
可以看出来，wrap的字号为2*16px=32px；而inner的字号为1*16px=16px。
######最后的最后，再来说个小技巧
在使用rem时，可以给html设置一个font-size:0.625rem;也就是10px，这样的话，在设计稿中的任何字号的字体，只要除以10，就可以得到相应字号的字体了。