一、像素的分类
首先我们需要知道像素其实是有分类的，常见的三种像素名称：
- 设备像素（又称物理像素）；
- 设备独立像素（又称逻辑像素）；
- css像素。
二、物理像素和逻辑像素
设备像素，也叫物理像素：
- 设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，在屏幕出厂后便不再改变；
- 我们在购买显示器或者手机的时候，提到的设备分辨率其实就是设备像素的大小；
- 比如iPhone X的分辨率1125×2436，指的就是设备像素。
设备独立像素，也叫逻辑像素：
- 如果面对开发者我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的；
- 开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发；
- 所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念；
- 比如你购买了一台显示器，在操作系统上是以1920×1080设置的显示分辨率，那么无论你购买的是2k还是4k的显示器，对于开发者来说，都是1920×1080的大小。
CSS像素
- CSS中我们经常使用的单位也是pixel，它在默认情况下等同于设备独立像素（也就是逻辑像素）。
三、通过js获取设备独立像素
// 通过window身上的screen属性获取（window可省略）
const hieght = screen.height
const width = screen.width
