移动端web开发PX单位问题

在页面开发过程中，对于设计给的设计稿，一般的PC页面开发的时候，很简单，使用px为单位，给多少px就标注多少。但是到了移动端的web开发，一般标注的单位是dp，这对于css里面px单位就需要转换一下了，这边简单说明一下相关点。

几个概念

设备像素

设备像素，也叫物理像素，先来看看很多资料上面的描述

它是物理概念，指的是设备中使用的物理像素(Physic pixel)。这个单位用px表示，它是一个[相对绝对单位]，即在同样一个设备上，每1个设备像素所代表的物理长度(如英寸)是固定不变的(即设备像素的绝对性); 但在不同的设备之间，每1个设备像素所代表的物理长度(如英寸)是可以变化的(即设备像素的相对性);

设备像素就是这个设备上总共有多少个这样的单位像素

CSS像素（设备独立像素）

这个也是一个相对单位,所以它在一个设备中具体表现为多少不确定,除受到设备宽度影响外还有以下两点可以影响它。

• 屏幕布局视口大小

• 屏幕的分辨率
  而我们在真实编码过程中使用的就是这个CSS像素，下面说一下CSS像素和设备像素的关系

  
  
  物理像素和CSS像素的关系
  
  

  可见，在两块不同的屏幕上面，相同的CSS像素，其展示效果一直，大小相等，但是其底层的物理像素点的个数会有较大的区别。

DPR（设备像素比）

关于这个值，我们有如下公式
DPR = 物理像素点的个数/CSS像素点的个数
举例：
若DPR=3，则1CSS像素点等于3物理像素点，具体效果见上图。
那我们如何获取一台手机的DPR呢，在js里面，可以通过window.devicePixelRatio来获取该值，而我们知道，screen.width可以获取屏幕的宽度

在华为手机（1080*1920）上面显示的话，就是360和3，可见公式是OK的，1080/360=3

DP（密度无关像素 ）

一般这个单位多见于android上面的布局，其作用是为了保证在不同设备上面同样页面的显示，官网说明如下

在定义 UI 布局时应使用的虚拟像素单位，用于以密度无关方式表示布局维度 或位置。
密度无关像素等于 160 dpi 屏幕上的一个物理像素，这是 系统为“中”密度屏幕假设的基线密度。在运行时，系统 根据使用中屏幕的实际密度按需要以透明方式处理 dp 单位的任何缩放 。dp 单位转换为屏幕像素很简单： px = dp * (dpi / 160)。 例如，在 240 dpi 屏幕上，1 dp 等于 1.5 物理像素。在定义应用的 UI 时应始终使用 dp 单位 ，以确保在不同密度的屏幕上正常显示 UI

上面dpi为屏幕密度，Dots Per Inch(每英寸点数)

dpi计算公式

其中w为屏幕宽度，单位px，h为屏幕高度，s为屏幕尺寸，单位英寸
DP的存在，就是为了解决android机型的不同分辨率问题，在不同的手机上面，dp和px有如下转换关系

px与dp转换公式

上图是px和dp的转换关系，其中px指的是物理像素

DP和CSS像素转换

关于DPR，大致有如下的一个关系

DPR = 设备像素/CSS像素 = 设备像素 / 设备独立像素 ~= DPI/160
一般我们需要获取如下几个数据

• 手机屏幕物理宽度（devicePxWidth），如1080px
• 设备像素比，即window.devicePixelRatio的值，如3
• 屏幕对应的dp宽度（deviceDpWidth），例如360dp

获取这3个值之后就比较简单了，以上面的数值为例，我们得知在该款手机上面，1dp=3px（物理像素），3px（物理像素）=1px（css像素），即1dp=1px（css像素）。

cssPx=dp*(devicePxWidth/deviceDpWidth/devicePixelRatio)