物理像素、逻辑像素、像素比？

什么是像素比？

像素比就是设备物理像素与设备独立像素的比值：设备像素比=设备物理像素/设备独立像素
通过浏览器控制台可以打印出来：

什么是设备物理像素和设备独立像素？

设备物理像素：就比如电脑屏幕的最小显示单元(像素点)，这块屏幕横向或者竖向有多少个这样的小单元，那就是多少像素。所以说，设备物理像素是实实在在存在的。
设备独立像素：也叫css像素、逻辑像素，所以web开发中我们使用的像素就叫做设备独立像素，它是抽象出来的一种说法。

设备物理像素和设备独立像素二者关系？

通过二者的定义可以知道，我们在web开发过程中常说的像素和设备物理像素不是一个东西。
但是为什么我们在开发过程中会认为是一个东西呢，那是因为在大多数设备中，设备物理像素和设备独立像素是一 一对应的，二者大小是相等的，所以反正都一样，管它是啥呢，索性就统称为像素吧。
如果一个逻辑像素需要使用一个物理像素来渲染，那么像素比就是1；如果一个逻辑像素需要使用两个物理像素来渲染，那么像素比就是2。


通过上边两张图我们可以看出，当像素比调整为原来的两倍的时候，所有文字和布局都变粗了，这是为什么呢？
原因是，一开始，我们的像素比是1，此时1个逻辑像素需要使用1个物理像素来渲染；当我们将像素比调整为2的时候，此时1个逻辑像素需要使用2个物理像素来渲染，单个物理像素的大小是不变的，所以此时显示的文字或布局都显得变粗了。
当我们在使用浏览器的缩放功能的时候，也是通过改变浏览器的像素比来实现的。