关键词：
CSS像素、设备独立像素、设备像素，三者联系紧密又有很大的区别，而我们主要是在做移动端开发的时候需要更多地用到这些概念，那他们分别是指什么呢？
概念
CSS像素（CSS Pixel）：适用于web编程，指的是我们在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在
设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素
设备像素（Device Pixel）：物理像素，设备能控制显示的最小单位，我们常说的1920×1080像素分辨率就是用的设备像素单位
关系
因为设备独立像素是包含了CSS像素的大类，所以我们可以直接讨论设备独立像素和设备像素之前的区别和联系。
首先我们可以做一个总体总结：
PC端 —— 1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下，如果缩放到200%可以说1个设备独立像素 = 2个设备像素）
移动端 —— 根据设备不同有很大的差异，根据 ppi 不同我们可以得到不同的换算关系，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素
在详细阐述之前我们先介绍两个概念：每英寸像素点ppi 和 设备像素比dpr
ppi （pixel per inch）：表示每英寸所包含的像素点数目，数值越高，说明屏幕能以更高密度显示图像
计算公式——
ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（例如苹果公司的Retina显示屏）
dpr（device pixel ratio）：设备像素比，设备像素/设备独立像素，代表设备独立像素到设备像素的转换关系，在JS中可以通过 window.devicePixelRatio 获取
计算公式——
知道设备像素比之后，我们就可以将程序中使用到的CSS像素转换为设备像素，解决同样的图片在不同移动终端上显示存在差异的问题。
常见的设备dpr可以通过 http://screensiz.es/phone 或者 http://devicepixelratio.com/ 查询，我们下面来说一说具体的使用方法。
当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；
当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素；
当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素。
如下图所示：
所以如果我们要在非标准屏幕上以同样大小显示同一张图片时，就需要缩放图片大小，计算公式为：
为什么是这样呢？就比如我们之前在CSS中设置图片大小为100px，要在dpr为2:1（即在一个方向上2个设备像素长度代表1个CSS像素长度）的Retia屏幕上同比例显示，就需要先放大这个图片到2被大小，即200px，这样我们在设备上对于图片的直观感受才是和标准屏幕相同。
而最后说一下，我们在移动端页面开发中尝试用到元信息配置<meta name="viewport" width="device-width">，添加这段代码后我们发现之前缩放的页面被放大了
其实它的含义就是将视口设置为：CSS像素=设备像素，即我们在页面中设置的1个CSS像素大小就等价于1个设备像素大小，在PC上看不到效果，但在移动端页面开发中我们就能看到很大的差异。
开发移动端页面
...CSS像素，而设备像素无论大小还是数量都是不变的。二、移动端的三个视口布局视口：移 查看详情
移动端h5网页开发必备知识(代码片段)
简介工欲善其事必先利其器，今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案。如果已经看过这篇文章了或者已经掌握了移动端基础的话可以看笔者写的移动端H5网页开发常见问题汇总移动... 查看详情
移动端高清适配方案（解决图片模糊问题1px细线问题）
...在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素是和屏幕像素密度有关的。物理像素（physicalpixel）物理像素又被称为设备像素、设备物理像素、它是显示器（电脑、手机屏幕）最小的... 查看详情
移动端1px边框问题(代码片段)
.../blog.csdn.net/yexudengzhidao/article/details/98480173本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。物理像素、设备独立像素和设备像素比... 查看详情
一篇真正教会你开发移动端页面的文章
一篇真正教会你开发移动端页面的文章(一)一什么是像素？像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。这是像素的概念，实际上，在web前端开发领域，像素有以下两层含义：设备像素：设备屏幕的物理像... 查看详情
移动开发--像素知识
抽象单位：可以根据不同设备关系来变大变小。而物理像素是固定的，不会改变。 例如：iPhone51个css像素=4个物理像素 上图中1136和640的单位是dp window.devicePixelRatio是设备上物理像素和设备独立像素(dip或dp)(device-independe... 查看详情
像素，css像素，物理像素，设备独立像素，分辨率大乱斗
本文主要阐述移动端布局中常遇到的一些基本概念，这些概念也适用于PC端，这些概念大概有：像素（pixel），ppi，分辨率，物理像素（physicalpixel），CSS像素，设备独立像素（devicedependentpixel）像素像素是图像显示的基本单位，... 查看详情
像素，css像素，物理像素，设备独立像素，分辨率大乱斗
本文主要阐述移动端布局中常遇到的一些基本概念，这些概念也适用于PC端，这些概念大概有：像素（pixel），ppi，分辨率，物理像素（physicalpixel），CSS像素，设备独立像素（devicedependentpixel）像素像素是图像显示的基本单位，... 查看详情
移动端web怎么循序渐进地开发一个移动端页面
1.移动页面开发基础1.1像素——什么是像素像素是Web页面布局的基础，那么到底什么才是一个像素呢？像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。这是像素的概念，实际上，Web前端开发领域，像素... 查看详情
前端必会的html+css常用技巧之移动端1px边框(代码片段)
...备独立像素(device-independentpixel)设备像素比(devicepixelratio)移动端1px边框的解决方案方案一方案二方案三写在末尾写在开头正文之前，我们需得了解几个重要的名词：物理像素、设备独立像素和设备像素比工作中我们通常使... 查看详情
前端必会的html+css常用技巧之移动端1px边框(代码片段)
...备独立像素(device-independentpixel)设备像素比(devicepixelratio)移动端1px边框的解决方案方案一方案二方案三写在末尾写在开头正文之前，我们需得了解几个重要的名词：物理像素、设备独立像素和设备像素比工作中我们通常使... 查看详情
移动端开发基础知识
1.物理像素像素即一个小方块，它具有特定的位置和颜色，像素可以作为图片或电子屏幕的最小组成单位，这是一个相对长度单位，因为固定长度的屏幕可以有1000像素，也可以有5000像素2.分辨率屏幕分辨率指一个屏幕具体由多少... 查看详情
viewport预备知识
...6dpidpr=设备物理像素/设备独立像素设备物理像素指显示在移动端中实际的像素。设备独立像素是css中定义的像素。比如说iphone4的dpr=2，而此时设置border的宽度为1px（设备独立像素），那么此时设备物理像素为2px。所以在移动端上 查看详情
移动端开发--物理像素和逻辑像素
虽说在在webapp开发中，只需要掌握页面布局，页面适配，能够将页面完美在各种设备上展现。但是，为什么要这样做？这样做原理是什么？这么优点是什么？深究下去，大家不一定很清晰。 那么，咱们一起学习下~ ... 查看详情
我像素的理解
...像素和设备独立像素之间存在着一定的对应关系。不管是移动端还是PC端通过screen.width/height获取的这个值是设备独立像素（CSS像素） 查看详情
viewport，逻辑像素/设备独立像素，物理像素/设备独立像素，分辨率，css像素，设备像素比dpr，像素密度ppi。
...1英寸2.54厘米。小米note为5.7英寸，约为14.478厘米。2.物理像素/设备像素/像素：以一个很不严谨的方式去通俗的解释：这个屏幕是5英寸的，先把竖着等距画1919条线，这样横着看会有1920列，同理再横着 查看详情
移动端的适配问题
...确的说法）。但你把浏览器切换到设备模式时，也就是在移动端环境下通过上面的screen.width/height获取的不是移动设备的分辨率，而 查看详情
前端必会的html+css常用技巧之移动端1px边框(代码片段)
...备独立像素(device-independentpixel)设备像素比(devicepixelratio)移动端1px边框的解决方案方案一方案二方案三写在末尾写在开头正文之前，我们需得了解几个重要的名词：物理像素、设备独立像素和设备像素比工作中我们通常使... 查看详情