css中的相对单位与绝对相位
传统pc端网页设计中，设计师给出的视觉元素大小的衡量单位通常是以css中的px为单位的。我们也从来不去关心一px到底有多长，只要按照设计师给出的px大小编写css代码即可。所以很多前端开发认为px是绝对单位，甚至很多css书籍中也简单的告诉我们px是绝对em、ex、单位百分比是相对单位。
而实际上除了pt之外其他都是相对单位，关于pt这个单位我除了在《css权威指南》种有见过外，其他css书籍从未提到。pt在css单位中属于真正的绝对对单位，1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米。
那么px到底是什么？
px实际是pixel（像素）的缩写，根据 维基百科的解释，它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文！一定要清楚它的上下文！一定要清楚它的上下文！
不同的设备，图像基本采样单元是不同的，显示器上的物理像素等于显示器的点距，而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别称为ppi和dpi：
ppi：每英寸多少像素数，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。
dpi：每英寸多少点。
关于打印机的点距我们不去关心，只要知道 当用于描述显示器设备时ppi与dpi是同一个概念 。
CSS像素的真正含义
由于不同的物理设备的物理像素的大小是不一样的，所以css认为浏览器应该对css中的像素进行调节，使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多 ，目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算，而css规范中使用"参考像素"来进行换算。
1参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。它并不是1/96英寸长度，而是从一臂之遥的距离处看解析度为96dpi的设备输出一单位（即1/96英寸）时视线与水平线的夹角。通常认为常人臂长为28英寸，所以它的视角是(1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。
由于css像素是一个视角单位，所以在真正实现时，为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取css像素
设计师的设计稿
CSS网页开发的目的就是还原设计师的设计稿，pc时代的前端开发者不需要去了解CSS像素的来龙去脉，只需要按照设计师的标注用css还原即可，而且设计稿的长度单位跟设备的显示单位一致。
然而随着移动时代的发展，不同尺寸不同设备分辨率，相同尺寸下不同分辨率。为了在各式各样的手机屏幕上有一致的视觉，甚至是同一份设计稿要同时在native和移动web上使用，设计稿需要定一个设计标准，即设计稿的大小和视觉元素的长度单位，然后在各个设备上做适配。
dpi、ppi、dip、分辨率、屏幕尺寸、设备像素、css像素、设备像素比
延伸阅读
- 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
学习是年轻人改变自己的最好方式