dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算

不念不忘少年蓝@ 2022-06-07 05:37 1282阅读 0赞

# dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算 #

## 前言: ##

*  移动端的设计需要去调整在不同机型上的显示, 所以在进行移动端开发的时候需要去了解一下尺寸大小, 需要去换算一下布局页面与设计页面尺寸大小的关系，所以就需要去换算一下布局页面与设计页面尺寸大小。

--------------------

## 理解概念: ##

*  `dip` : Density independent pixels, 设备无关元素;
 *  `dp` : 就是dip;
 *  `px` : 像素;
 *  `dpi` : dots pei inch, 直接来说就是一英寸多少个像素点;  
    
    
     *  `常见取值`120`,`160`,`240\`。
     *  这个概念可以理解为像素密度, 简称密度;
 *  `density` : 中文意思是**密度**;  
    
    
     *  常见取值`1.5`, `1.0`;
     *  和标准`dpi`的比例(`160px/inc`);
 *  分辨率 : 纵横2个方向的像素点数量;  
    
    
     *  移动端常见的取值是`480 * 800`, `320 * 480`;
 *  屏幕尺寸 : 屏幕对角线的长度;  
    
    
     *  PC端的电脑与电视同理;
 *  屏幕比例的问题 : 因为只确定了对角线长, 两边长度还不一定;  
    
    
     *  这就是屏幕比例的来源, 如: `4 : 3`, `16 : 9`这种, 这样就可以算出屏幕的边长了.

--------------------

## 应用: ##

*  在`android`里面, 获取一个窗口的`metrics`, 里面有这么几个值。

metrics.density;
        metrics.densityDpi;

*  `densityDpi` : 就是常见的`dpi`;
 *  `density` : 其实是DPI/(160像素/英寸)后得到的值;  
    
    
     *  DPI本身的单位也是**像素/英寸**, 所以`density`其实是没单位的, 他就是一个比例值。
     *  而`dpi`的单位是**像素/英寸**, 比较符合物理上面的密度定义, 密度不都是单位度量的值, 所以更多的人愿意把`dpi`叫做**像素密度**, 简称密度, `density`还是就叫`density`。

--------------------

## 重点: ##

*  一般Big-man在页面的操作中给的是像素的值, 也就是`px`的值, 但是再做设计图的时候, Big-man却给的是`dp`点的概念。比如:
 *  `dp`:  
    ![psDp][]
 *  `px`:  
    ![px][]
 *  所以在Big-man书写自己布局的时候, 肯定还是要知道1个`dp`究竟等于多少个`px`的。
 *  所以需要去写一个换算公式, 如下所示:  
    
    
     *  `dp = (DPI/(160像素/英寸)) px = density px`
 *  这里的`dp`是单位, `px`是单位, 但是`density`是没有单位的;
 *  也就是说dpi针对不同的值, `dp`与`px`之间的换算也就存在不同的对应值，请看如下表格:

<table> 
 <thead> 
  <tr> 
   <th>dpi</th> 
   <th align="center">density</th> 
   <th align="right">dp</th> 
   <th align="right">px</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>120</td> 
   <td align="center">3/4</td> 
   <td align="right">4</td> 
   <td align="right">3</td> 
  </tr> 
  <tr> 
   <td>160</td> 
   <td align="center">1</td> 
   <td align="right">1</td> 
   <td align="right">1</td> 
  </tr> 
  <tr> 
   <td>240</td> 
   <td align="center">1.5</td> 
   <td align="right">1</td> 
   <td align="right">1.5</td> 
  </tr> 
  <tr> 
   <td>320</td> 
   <td align="center">2</td> 
   <td align="right">1</td> 
   <td align="right">2</td> 
  </tr> 
 </tbody> 
</table>

*  也就是说`dp`与`px`之间的换算存在对应的比例关系:  
    
    
     *  `PX = density * DP`;

--------------------

## **标准dpi = 160:** ##

*  `Android Design [1]` 里把主流设备的 dpi 归成了四个档次，`120 dpi`、`160 dpi`、`240 dpi`、`320 dpi`;
 *  实际开发当中，我们经常需要对这几个尺寸进行相互转换（比如先在某个**分辨率**下完成设计，然后**缩放到其他尺寸微调**后输出），一般按照 dpi 之间的比例即 `2:1.5`、`1.5:1` `1:0.75`, 来给界面中的元素来进行尺寸定义。
 *  也就是说如果以 `160 dpi` 作为基准的话，只要尺寸的 **DP 是 4 的公倍数**，**`XHDPI` 下乘以 2**，**`HDPI` 下乘以 1.5**，**`LDPI` 下乘以 0.75** 即可满足 **所有尺寸下都是整数`pixel`** 。
 *  但假设以 `240 dpi` 作为标准，那需要 `DP` 是 `3` 的公倍数，**XHDPI 下乘以 1.333**，**MDPI 下乘以 0.666** ，**LDPI 下除以 2**
 *  而以 **`LDPI`** 和 **`XHDPI`** 为基准就更复杂了，所以选择 `160 dpi`。

--------------------

## **Google公司给出的说明:** ##

*  这个在Google的官方文档中有给出了解释，因为第一款**Android设备**（HTC的`T-Mobile G1`）是属于`160dpi`的。

--------------------

## **示例分析:** ##

### **屏幕尺寸(screen size):** ###

*  就是我们平常讲的**手机屏幕大小**，是**屏幕的对角线长度**，一般讲的大小单位都是英寸。
 *  比如`iPhone5S`的屏幕尺寸是**4英寸**。`Samsung Note3`是**5.7英寸**。  
    ![screen size][]

--------------------

### **像素(pixel)** ###

*  想像把**屏幕放大再放大**，对！看到的那一个个小点或者小方块就是像素了。  
    ![pixel][]

--------------------

### **分辨率(Resolution):** ###

*  是指屏幕上**垂直方向**和**水平方向**上的像素个数。
 *  比如`iPhone5S`的分辨率是`1136*640`；
 *  `Samsung Note3`的分辨率是`1920*1080`；  
    ![Resolution][]

--------------------

### **dpi:** ###

*  是`dot per inch`的缩写，就是**每英寸的像素数**，也叫做**屏幕密度**。这个值越大，屏幕就越清晰;
 *  `iPhone5S`的`dpi`是`326`； `Samsung Note3` 的dpi是`386`;  
    ![dpi][]

--------------------

### **dip：** ###

*  是`Density independent pixel`的缩写，指的是**抽象意义上的像素**。跟**设备的屏幕密度**有关系。
 *  它是`Android`里的一个单位，`dip`和`dp`是一样的。
 *  Google的官方说明是这样的：  
    
    
     *  Density-independent pixel (dp).
     *  A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
     *  The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a “medium” density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp \* (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application’s UI, to ensure proper display of your UI on screens with different densities.
 *  就是说在`160dpi`的屏幕上，`1dip=1px`。
 *  它跟**屏幕密度**有关，如果屏幕密度大，`1dip`代表的`px`就多，比如在`320dpi`的屏幕上，`1dip=2px`。

--------------------

### 为什么我们在布局的时候最好要用dip，不要用px？ ###

*  是因为这个世界上存在着很多**不同屏幕密度**的手机，屏幕密度是什么？就是dpi，就是单位长度里的**像素数量**。
 *  想象一下，如果这些手机的尺寸一样，**屏幕密度**相差很大，那么是不是说一个手机水平方向上像素很少，另一个手机水平方向上像素很多？那我们画同样pix数量的时候，它显示的长度不就会不一样了？
 *  比如下面图中的两个手机，同时设置`2px`长度的`Button`，在屏幕密度较高的手机里就会显示的比较小。
 *  而同时设置的`2dip`长度的`Button`，在两个手机上显示的大小是一样的。  
    ![Button][]
 *  所以如果你在App布局中都用的px作为单位，那么你的App跑在各个设备上就会出现奇奇怪怪的现象了。
 *  来看一下emulator上的效果，我定义了两个Button，分别用px和dip做单位。
 *  布局文件里这样写:

*  显示的界面是这样的：  
    ![display][]
 *  `getResources().getDisplayMetrics().densityDpi` 就是屏幕密度。
 *  `getResources().getDisplayMetrics().density` 也可以理解为1dip相当于多少个px啦。
 *  上面的`dpi`是`240`，`1dip=1.5px`
 *  所以，**100dip的Button**是**100pxButton的1.5倍长**吧。

--------------------

> JackDan9

[psDp]: /images/20220607/17eb4fdcea8641959a95b52b5f0d834e.png
[px]: /images/20220607/e58e5f58bf744e4286c67161bf9114ab.png
[screen size]: /images/20220607/07efad2d17dc40b3a96b7b8e9419fd1c.png
[pixel]: /images/20220607/6df1554ba74647608eee589068b8e77a.png
[Resolution]: /images/20220607/921804373d264423a018e5f8377534e9.png
[dpi]: /images/20220607/ff96cfa981bf40f2b72bf53043879920.png
[Button]: /images/20220607/3cb758a1053e47afbc7f9424c90a1e80.png
[display]: /images/20220607/418d127a50cf48caa1515883ea8ae041.png