pt、ppi、dp、sp之间的关系

一、ios

首先说下pt，pt在印刷中是绝对单位1pt＝1/72（inch）；

在ios中1pt＝1个逻辑像素。iphone规定在@1x时，即iphone3s下1pt＝1px

iPhone有3种ppi（像素密度）分别是：

@1x，163ppi(iphone3gs）

@2x，326ppi（iphone4、4s、5、5s、6）

@3x,401ppi（iphone6+）

ppi = PPI = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数， 单位px／inch

iphone3s的ppi为163px／inch ＝ 1，并规定此时1pt＝1px；

@1x时，iphone3s的逻辑像素是320pxx*480px；此时1pt＝1px＝1/163inch；

@2x时，1px＝1/326inch，则此时1pt＝2px

@2x时，1px＝1/404inch，则此时1pt～＝2px

二、android

android中dp与ios中pt作用等同

android中在160ppi的情况下1dp＝1px；

android中在320ppi的情况下1dp＝2px；

android中在480ppi的情况下1dp＝3px；

android中字体用sp表示，android中字体可以在系统中设置，默认情况下1sp＝1px，

三、web

css中的px是逻辑像素，所以设计时考虑移动设备宽度就行

1、pc web

在pc中，px指的都是逻辑像素，1个逻辑像素就是1px，

2、移动端

将传统网页转换成能适配移动端的网页，只需添加viewport。

移动设备默认的viewport是layout viewport，即默认不设置viewport，viewport＝layout port。

例如iPhone4S如果不设置viewport，他就会默认是980px，就像把屏幕分成980份（不是屏幕分辨率的640px哦！）。如果设置一个元素为100px*100px，看起来就是屏幕的100/980。

由于css中的像素就是移动设备的逻辑像素，即1pt＝1px

所以设置viewport实质就是重新设置了移动设备的宽度（逻辑像素），即移动设备宽度为980pt，但此时pt单位已经改变，不再是2/163px。

对于用户将页面放大一倍时，layoutport不变，相当于viewport宽度就缩小一倍，变为490px，此时该元素宽度就变为100/490。

这也好理解，放大了一倍嘛，就是原来1px的东西变成2px了，但是1px变为2px并不是把原来的980px变为1960px了，而是在实际宽度不变的情况下，1px变得跟原来的2px的长度一样了