css移动端页面单位,移动端web开发PX单位问题

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

几个概念

设备像素

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

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

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

CSS像素(设备独立像素)

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

屏幕布局视口大小

屏幕的分辨率

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