前段时间写了爱恨情仇一，这几天正好没那么忙了，就开始写后续了。
平时我们编写网页的时候css的长度单位一般用px，在wap端我们一般会用rem搭配淘宝的flexible来编写。但是在使用的时候你们知道到底做了什么嘛？下面我们慢慢来介绍！
1、基础知识
基础知识这一块主要是摘自CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
1.1 ppi（pixels per inch）
dpi（dots per inch）是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了dpi的概念，由于计算机显示设备中的最小单位不是墨汁点而是像素，所以用ppi（pixels per inch）值来表示屏幕每英寸的像素数量，我们将ppi、dpi都称为像素密度，但ppi应用更广泛，dpi在Android设备比较常见。
1.2 pt（point）
磅，代表1/72英寸。是一个绝对单位，一般用在印刷方面。1英寸等于2.54厘米。
1.3 px（pixels）
像素，是图像的基本采样单位。它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念。
1.4 dp（device pixels）
设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。
1.5 dip（device independent pixel）
设备独立像素，也称为逻辑像素，简称dip。随着技术发展，设备不断更新，出现了不同ppi的屏幕共存的状态（如iPhone3G/S为163ppi，iPhone4/S为326ppi），像素不再是统一的度量单位，这会造成同样尺寸的图像在不同ppi设备上的显示大小不一样。 所以这时我们需要一个新的单位，这个新的单位能够保证图像内容在不同的ppi设备看上去大小应该差不多，这就是独立像素，在ios设备上叫pt(Point)，Android设备上叫dip(Device independent Pixel)或dp。注意，这里的pt、dp不是上述普通单位pt 、dp，是ios和Android为独立像素专门定义的单位。
1.6 dpr（device pixels ratio）
设备像素比dpr描述的是未缩放状态下，物理像素(dp)和设备独立像素像素(dip)的初始比例关系: dpr = dp / dip
2、关系连接
2.1 各种像素之间的关系
上面提到了设备像素（device pixels）、设备独立像素（device independent pixel）、ios中的pt、Android中的dp还有我们经常用的css像素，这些“像素”间到底是什么关系呢？那面下面来告诉你们：
首先设备独立像素在网页中相当于css像素，在ios中相当于pt、在Android中相当于dp，那是不是1 css px = 1 ios pt = 1Android dp呢？不是的，既然设备独立像素也叫逻辑像素，那么肯定不是这样简单的对比的：
1、dp为安卓开发时的长度单位，根据不同的屏幕分辨率，与px有不同的对应关系。安卓端屏幕大小各不相同，根据其像素密度，分为以下几种规格：
1dp定义为屏幕密度值为160ppi时的1px，即，在mdpi时，1dp = 1px。 以mdpi为标准，这些屏幕的密度值比为：ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3;即，在xhdpi的密度下，1dp=2px;在hdpi情况下，1dp=1.5px。其他类推:1dp=(屏幕ppi/ 160)px。
2、pt为ios开发室的长度单位，举例说明就是iPhone 3G（ppi为163）1pt = 1px，iPhone 4（ppi为326）1pt = 2px。
3、css中px是网页中的长度单位，由于不同的物理设备的物理像素的大小是不一样的，所以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像素，而具体的值可以认为同等于上面Android设备中的dp和ios设备中的pt。
4、设备像素与其他像素之间的关系：上面说的1dp = 1px、1pt = 2px中的px其实是分辨率中的px，而分辨率px又是什么呢？我们所有的计算都是基于分辨率px的，也就是1.3中的像素（pixels）
。一般设备上有多少物理像素我们就说它的分辨率是多少，但是这不是绝对的。比如我们电脑就能更改分辨率，假如我们电脑有200*200个物理像素，但我们把电脑的分辨率设为100*100，那电脑会怎么办呢？当然是让1个分辨率像素等于2个物理像素，而我们刚刚又说了，我们所有的计算都是基于分辨率px的，本来假如我们1css像素 = 1分辨率像素 = 1设备像素，当我们将分辨率调成100*100后，1css像素 = 1分辨率 = 2物理像素。这也是为什么我们将分辨率调小之后屏幕上的图像会变大。
2.2 css 中各个单位之间的关系
在css中有几个需要提到的长度单位px、rem、vh、vw、pt，其他还有许多可自行查看MDN上的定义。
在web端典型的电脑显示器的分辨率是96DPI，也就是1分辨率px为1/96英寸，而在1.2中我们说过pt是一个绝对单位，1pt代表1/72英寸，在电子设备中所有的长度单位都得转换成分辨率像素，所以px和pt有一个比例关系：1px = 0.75pt。而web端1css像素等于1分辨率像素，所以在css中也是1px = 0.75pt。经过本人测试，在移动端不管ppi多少依然延续着这个比例。所以在css中pt并不是绝对的长度（这点与MDN中的描述相悖，需要更深入的研究），只是与px形成了一个固定的比例，而电子设备中都是以px作为基本单位，所以在css中以pt作为单位并不是一个好点子。
vw和vh在有的时候是一个非常有用的单位，它们分别代表视口的宽度和高度。
rem这个单位代表根元素的 font-size 大小（html 元素的font-size）。当用在根元素的font-size上面时 ，它代表了它的初始值。那么这个单位有什么用呢？淘宝的flexible给它做了一个很好的诠释。
截取flexible的一段有关于rem的代码
1 | var docEl = document.documentElement; |
这段代码的意思就是根据屏幕的宽度设置根元素fontsize的大小，假如屏幕宽度为375px，那么根元素的fontsize的大小为37.5px，也就是说1rem = 37.5px。好了，现在有这样的场景，我想让一个div的宽度等于页面的宽度，现在遇到问题了，各种各样的移动设备的宽度都不一样，除了用百分比的形式还能怎么办呢？用rem就可以完成，上面说了根据屏幕宽度设置了根元素的fontsize的大小，那么当我设置div的宽度为10rem的时候，在375px宽度的设备显示375px，在640px宽度设备上就显示640px，这样不就很完美嘛。这仅仅只是一个例子，仔细想想用在其他场景下是非常适合的。
flexible是将docEl.clientWidth除以10，在375px宽度设备上1rem = 37.5px，那么我想设置一个设计稿宽375px上的为20px元素应该是多少rem呢，只能用20 / 37.5，这时候缺点就暴露出来了，每次设置一个值都得去除37.5，计算起来非常麻烦，所以我们可以适当的变通一下，假如设计师给我们的设计稿宽375px：
1 | function setRemUnit () { |
那么现在在宽度为375px的设备上1rem = 10px，那么当我想设置20px时只需将它设置为2rem就行了，是不是很方便！
撒花
好了爱恨情仇二也写完了，本文章里引用了许多其他文章里的内容，一一列举出来，感谢他们的贡献：
像素（px）到底绝对单位还是相对单位
针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
移动WEB基础知识（上）（基本概念，视口，移动浏览器）
