px和dp（内含⼤量的像素单位详解）1、前⾔：
读完本⽂你会学到什么：
dp(device pixels)
px(css pixels)
pt(point)
ppi(pixels per inch)
dpi(dots per inch)
dpr(device pixels ratio)
dip(device independent pixel)
读本⽂你需要掌握哪些基本知识：
1in(英⼨) == 2.5399999961392cm
常常⽤1英⼨等于2.54厘⽶
1m == 3尺
1尺== 10⼨
1⼨== 3.33333333cm
iphone6屏幕4.7⼨是指屏幕对⾓长度为4.7英⼨
iphone6的⾼宽⽐为iphone6_height : iphone6_width = 16 : 9
2、dp(设备像素)
2.1、说明
dp是设备像素，也叫物理像素，顾名思义，他就是指⼀个物理发光点的单位。
iphone6官⽅在产品说明书上写的屏幕分辨率为1334x750像素指的是物理分辨率。
也就是⾼1334dp，宽750dp。
3、px(逻辑像素)
3.1、说明：
px是逻辑像素，逻辑像素是相对的单位。
在每个设备上对应的dp是不⼀样的是不⼀样的，在相同设备上对应的dp也可以不同。
这就是为什么我我们的图⽚可以放⼤缩⼩的原因。
4、pt(点)
4.1、说明
pt是专⽤的印刷单位“点”，这个单位是绝对单位.
1pt == 1/72in
5、ppi(每英⼨的像素)
5.1、说明
ppi指的是单位英⼨长度上的平均孔数
iphone6官⽅在产品说明书上写像素密度为326ppi，指的就是在它的1in == 326dp
5.2、计算iphone6的像素密度
先通过iphone6的对⾓4.7in和⾼宽⽐可以算出⾼和宽：
iphone6_width = 2.304227826273027in = 2.3in
iphone6_height = 4.096405024485382in =4.1in
一般使用的分辨率的显示密度是多少dpi
再然后通过这个宽⾼和屏幕物理分辨率可以算出ppi
iphone6_width_ppi = 750dp/2.3in = 326.0869565217391ppi
iphone6_height_ppi = 1334dp/4.1in = 325.3658536585366ppi
可以得出宽和⾼都是⾮常近似的等于326dp的
6、dpi(每英⼨的点数)
6.1、说明
dpi是输出设备的物理能⼒
例如：300DPI的油墨打印机是指每英⼨有300墨滴⽤于打印机，每英吋能印出的点的数⽬为300。
“像素”（p）只存在于计算机显⽰领域，⽽“点”（d）只出现于打印或印刷领域。
6.2、注意
在显⽰器中ppi和dpi是同⼀概念
7、dpr(devicePixelRatio)
7、1说明
window.devicePixelRatio是设备上物理像素和逻辑像素的⽐例。
dpr不是单位，是⼀个属性，在浏览器中通过window.devicePixelRatio 获取屏幕的DPR。
在⽤开发者⼯具开发⼩程序的时候，在切换模拟器的时候可以看到各个设备的dpr，iphone6的设备dpr为2
8、dip(设备独⽴像素)
8、1说明
是由⾕歌推出⽤来适配各个安卓屏幕差异的。
在定义UI布局时，应该使⽤⼀个虚拟像素单元，以⼀种密度独⽴的⽅式表⽰布局维度或位置。
密度⽆关的像素相当于⼀个物理像素在160 dpi屏幕上，这是系统为“中等”密度屏幕所假设的基线密度。
在运⾏时，系统会根据实际的屏幕密度，透明地处理dp单元的任何扩展。将dp单元转换为屏幕像素很简单：px=dp（dpi/160）。
例如，在240 dpi屏幕上，1 dp等于1。5物理像素。在定义应⽤程序的UI时，应该始终使⽤dp单元，以确保在具有不同密度的屏幕上正确显⽰UI。
就是说在160dpi的屏幕上，1dip=1px。
它跟屏幕密度有关，如果屏幕密度⼤，1dip代表的px就多，⽐如在320dpi的屏幕上，1dip=2px。
9、彩蛋
9.1、viewport
viewport是⽤户⽹页的可是窗⼝。
⼿机浏览器是把页⾯放在⼀个虚拟的"窗⼝"（viewport）中，通常这个虚拟的"窗⼝"（viewport）⽐屏幕宽，这样就不⽤把每个⽹页挤到很⼩的窗⼝中（这样会破坏没有针对⼿机浏览器优化的⽹页的布局）9.2、实例代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
具体值含义可以参考我之前写的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。