像素其实分为两种，分别是物理像素和CSS像素
-
物理像素（设备像素）
物理像素，顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。
通常我们看一些电子设备的参数，比如分辨率用的就是物理像素。它配合屏幕尺寸（注意：屏幕尺寸通常是说屏幕的对角线长度），可以计算出PPI（每英寸像素取值），即每一英寸物理像素数量。PPI越高，说明屏幕能提供更多细节。
-
CSS像素
CSS和js使用的抽象单位，浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px。 -
物理像素和CSS像素之间的关系(dppx，DPR)
在非高清屏及未缩放的状态下，一个CSS像素等于一个物理像素，而在一些PPI非常高的屏幕（例如苹果的视网膜屏幕）上，如果还让一个CSS像素等于一个物理像素，就会导致网页上的元素变得非常小，因此高PPI屏下，通常一个CSS像素等于两个甚至三个物理像素（由浏览器厂商决定，不同浏览器设定的值可能不同）。如果一个CSS像素占用n个物理像素，那么我们就说此时的dppx(dots per px)为n。
所以，我们可以用dppx描述物理像素和CSS像素之间的关系。dppx除了和PPI有关，也和当前缩放状态有关，举个例子，在非高清屏下，如果没缩放，一个CSS像素占用一个物理像素，此时是1dppx，但如果将页面放大到200%，此时一个CSS像素等于两个物理像素，即2dppx。
DPR（设备像素比，devicePixelRatio）描述的是未缩放状态下，物理像素和CSS像素的初始比例关系，计算方法如下图。
DPR由浏览器厂商决定，我们无法修改，但可以通过window.devicePixelRatio读取DPR。
可能有人疑问DPR和dppx到底啥关系，我们可以认为DPR描述的是未缩放状态，而dppx可以描述任意时刻的状态，未缩放状态下的dppx和DPR相等，当有缩放操作时，此时的物理像素和CSS像素的比例关系就只能用dppx描述了。
视口（viewport）
视口也叫作初始包含块，之所以叫这个名字，是因为它包含
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26
学习是年轻人改变自己的最好方式