详解px，em，rem

1.px

px是常用的长度单位，长度是固定的，不会随页面大小改变，px是pixel的简写，也就是像素。
我们把脸凑近电脑屏幕，可以看见整块显示屏是由无数个小方块组成的，这些小方块就是像素。但是我们凑近手机看，会发现这些小方块是肉眼看不清的，原因就是相同分辨率下（即相同像素点），屏幕大小不同，像素的密集度也不同，如今的手机分辨率都达到了pc的分辨率，但手机屏远远小于电脑显示屏，于是在电脑上能勉强看到的像素在手机上是基本看不到的。为什么设置相同像素的字体，在电脑上和手机上都能看的清呢？
答案是：css中的像素和屏幕上的像素是不一样的。
css上的像素会按一定比例转化成物理像素，这个比例称为devicePixelRatio,计算方法：逻辑分辨率 = 物理分辨率 / devicePixelRatio
这里的逻辑分辨率指css上的px，物理分辨率就是经过换算在显示设备上的实际px。

2.em

em是相对长度单位，相对于他的父级字体大小来计算长度。
例如：浏览器默认字体是16px， 父级设置font-size:62.5%，也就是10px;那么子级就是10px
注意：如果父级是1em，那么子级就是相对于1em的大小来算的，如果父级是1.2em是12px，那么子级的1em就是12px

<div class="content" style="font-size:62.5%">
	
		<p style="font-size:16px;">这是16px</p>
		<p style="font-size:1em">这是1em(父级元素的字体大小为62.5%即10px)</p>
		<p style="font-size:2rem;">这是2rem</p>
		
	</div>

3.rem

rem也是相对长度单位，但是他只相对于html根元素，也就是说只用修改html标签的字体大小，就能改变整个页面的rem，避免了em的一层层继承。rem是css3新增的单位，不支持IE8及更早版本

下面是测试的效果图

本文参考：
https://www.jianshu.com/p/bb76c606f0b4
https://www.cnblogs.com/leejersey/p/3662612.html