摘要：设备独立像素是一个整体概念，包括了像素，比如像素，只是在机中，像素不叫像素了，而叫设备独立像素。设备像素和独立设备像素的关系实例已为例设备宽高为，可以理解为设备独立像素或像素。获得设备像素比后，便可得知设备像素与像素之间的比例。
1.概念
设备像素（device pixel）简写DP
设备像素又称 **物理像素** ，是设备能控制显示的最小单位，我们可以把它看做显示器上的一个点。我们常说的 1920x1080像素分辨率就是用的设备像素单位。
css像素（css pixel）
css像素是 **web编程的概念** ，它是 **抽象的** ，实际上 **不存在** 。用于逻辑上衡量像素的单位。也就是我们做网页时用到的css像素单位。
设备独立像素（Device Independent Pixel）简写DIP
设备独立像素也叫 密度无关像素 ，可以认为是计算机坐标系统中的一个点，这个点表示一个可以由程序使用并控制的虚拟像素，可以由相关系统转换为物理像素。设备独立像素是一个整体概念，包括了css像素，比如:css像素，只是在android 机中，css像素不叫 “css像素了”，而叫“设备独立像素”。
2.关系因为设备独立像素是包含了css像素的大类，所以我们这里只讨论 设备像素 和 设备独立像素 的关系
PC端
1个设备独立像素等于1个设备像素（在100% 未缩放的情况下），如果缩放到200%，则1个设备独立像素等于2个设备像素
移动端
根据设备不同，有很大差异
在详细阐述设备像素和独立设备像素 的关系前我们先了解两个概念，ppi 和dpr
PPI 像素密度（pixel per inch）
PPI翻译过来就是每英寸有多少个像素点(这里的像素指的是设备像素，既物理像素)，说的直白点PPI就是**像素密度** pixel density），PPI的值越高，画质越好，看起来更有逼格。那么PPI是怎么计算出来的呢，看公式
计算公式：
我们不妨用上面的公式做做数学题,见下图：
下面我们来计算一下 iphone6 plus 的ppi;
var ppi = sqrt(1920X1920+1080X1080)/5.5; 计算结果ppi 为 400.528576，实际上会有出入，但这没关系。
好了我们还是回到上面的问题：两者（设备像素和设备独立像素）是如何进行换算的？它们是通过设备像素比(dpr,device pixel ratio)来进行换算的。那么什么是设备像素比呢？
DPR (device pixel ratio) 设备像素比
1.设备像素比定义了设备像素和设备独立像素的转换关系(告诉你一个设备像素对应多少个独立设备像素(既css像素))，计算式为：
在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。在css中，可以通过-webkit-device-pixel-ratio，webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。
2.设备像素的大小是固定的，是不可变的。而设备独立像素是可以被拉长或压缩的。这个该怎么理解呢看图。
下面我们来看个现实中的例子，Iphone 5s 使用的是 Retina 视网膜屏幕，什么是Retina视网膜屏幕？PPI 值超过 300 的叫做超高密度屏幕，只是 Apple 给它换了个高大尚的名称：Retina 视网膜屏幕而已。
在做移动页面开发的时候，相信你经常会遇到这种情况：在不同的手机上看时，里面的图片、文字或者线的大小会不一样，有时候大小区别还非常地大。原因就是刚才说到的设备像素比在作怪。
你想啊，如果在普通屏即标准 PPI下一个设备光点对应一个 CSS 像素时，页面不大不小，完美地渲染出来了。但在现在这个高逼格的年代，标准 PPI 已经很少见了。更多的是 Retina视网膜设备。而设备像素比不同的品牌的手机这个值也是不一样的。即使是同一个品牌的手机也不一样。你比如 Iphone 5s 设备像素比为2，Iphone 6s 设备像素比为3。至于安卓机中的设备像素比就更多了，有1.3、1.5、2、3等等。
3.设备像素和独立设备像素的关系(实例)已iphone6 为例：
设备宽高为375×667，可以理解为设备独立像素(或css像素)。 dpr为2，根据上面的计算公式，其物理像素就应该×2，为750×1334。
上图中可以看出，对于这样的css样式：
width: 2px;
height: 2px;
在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。
在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。 在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。
设备像素与CSS像素之间的换算是如何产生的呢？，这就要谈到ppi 和 dpr,以上计算出ppi是为了得到密度分界，获得默认缩放比例，即设备像素比。
由上图可知，ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）。
获得设备像素比后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113629.html
摘要：设备像素设备分辨率设备像素也叫物理像素。从图中可以验证，横纵方向的设备像素数量恰好是设备独立像素的倍。像素与设备独立像素的关系缩放比例就是像素边长设备独立像素边长。因为的宽度没有改变，无论以什么单位衡量设备像素设备独立像素还是像素。 这篇文章是我在我的旧博客上发过的文章，最近又碰到这个问题，整理修改了一下发到这里。 像素单位 像素单位有设备像素、逻辑像素和CSS像素3种。 设备像素（d...
摘要：我们用小米举例，屏幕像素物理像素为，设备独立像素为，也就是说，一个设备独立像素就包含个物理像素，同时我们能得出。 本文主要阐述移动端布局中常遇到的一些基本概念，这些概念也适用于PC端，这些概念大概有：像素（pixel），ppi，分辨率，物理像素（physical pixel）， CSS像素，设备独立像素（devicedependent pixel） 像素 像素是图像显示的基本单位，同时...
摘要：最近在研究屏的适配问题，在具体方案讨论之前，陆续做了一些理解笔记，现归纳如下。 最近在研究 Retina 屏的适配问题，在具体方案讨论之前，陆续做了一些理解笔记，现归纳如下。具体方案的讨论将另作文章。 中的 viewport 是布局视口 initial-scale 等的缩放是基于理想视口的 理想视口由设备各自提供，理想视口的宽度也是设备的独立像素 所谓独立是说这个设备独立像素和像素...
摘要：设备像素比设备像素比简称定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到设备像素比物理像素设备独立像素在某一方向上，方向或者方向在中，可以通过获取到当前设备的。 视觉稿 在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。 对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 首先，选取一款手机的屏幕宽高作为基准(以前是iphone...
摘要：设备像素比设备像素比简称定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到设备像素比物理像素设备独立像素在某一方向上，方向或者方向在中，可以通过获取到当前设备的。 视觉稿 在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。 对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 首先，选取一款手机的屏幕宽高作为基准(以前是iphone...
阅读 1697·2023-04-26 01:02
阅读 4837·2021-11-24 09:39
阅读 1802·2019-08-30 15:44
阅读 2872·2019-08-30 11:10
阅读 1782·2019-08-30 10:49
阅读 982·2019-08-29 17:06
阅读 608·2019-08-29 16:15
阅读 902·2019-08-29 15:17
