rem、px、em、pt、drp、dpi有何不同

1.关于长度单位

　　在CSS中长度分为相对长度和绝对长度。

　　相对长度单位：相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

　　绝对长度单位：绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

       在这几个中，em/rem/px属于相对长度单位，其余属于绝对长度单位。

2.各个单位定义

（1）像素px：像素（px）是相对于显示器屏幕分辨率而言的,它一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI，在扫描打印时一般都有 DPI 可选。由于屏幕大小的差异性，相同大小的字体在不同屏幕下显示的效果差异比较大。那么动态的放大/缩小字体就变得比较重要。显然针对每一处的字体设置都去做兼容是复杂的，于是就有了后面的 em 和 rem。

（2）em：相对于当前对象内文本的字体尺寸。em 会继承父级元素的字体大小。由此，只需要改变父元素的字体大小，就可以同步放大或缩小子元素的字体。浏览器默认的字体大小为16px，那么设置body选择器中设置：font-size:62.5% (10 ÷ 16 × 100% = 62.5%),现在想要设置h1字体大小为18px,只需设置font-size:1.8em即可。需要注意的是，如果h1中的p元素字体大小想设置为9px，则需要设置font-size:0.5em,而不是font-size:0.9em。即使用时需要重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。

（3）pt:印刷业上常使用的单位，磅的意思，一般用于页面打印排版，它等于1/72英寸。

（4）rem:是CSS3中新增加的一个单位值，和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。

（5）dpi:每英寸像素数。Windows 系统默认是 96dpi，Apple 系统默认是 72dpi。 

3.浏览器特性

（1）所有浏览器默认字体大小为16px。常见设置为把body的字体大小设为62.5%，刚好为10px。

（2）IE无法调整使用px作为单位的字体大小，即客户端不能自己设置字体大小。（待验证）

（3）Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。（待验证）

4.单位之间的转换

（1）px与pt

　　1px =( DPI / 72)*pt

　　1pt = (72/DPI)*px

（2）px与pt

　　16px=12pt

（3）像素px与毫米

　　象素数 / DPI = 英寸数
　　英寸数 * 25.4 = 毫米数

　　一英寸等于25.4mm。那么毫米换算成像素的公式为：

　　水平方向的换算： x * px /25.4
　　垂直方向的换算： y * py /25.4
　　像素换算为毫米： x * 25.4 / px

（4）pt/px/em/percent 换算参考

　　以 Windows 下的 96dpi 作参考，则有：pt = px72/96 = px3/4。

　　再考虑浏览器的默认字体大小是 16px，

　　那么就有    12pt  16px 1em 100%

 

参考链接：https://lzw.me/a/pt-px-em-rem.html#dpidots-per-inch