设备物理像素、设备独立像素

视觉稿

在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。

对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：

首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。
对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。

问题：

对于dpr=2的手机，为什么画布大小×2，就可以解决高清问题？
对于2倍大小的视觉稿，在具体的css编码中如何还原每一个区块的真实宽高(也就是布局问题)?

带着问题，往下看…
一些概念

在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。
设备像素比(device pixel ratio )

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和
-webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

综合上面几个概念，一起举例说明下：

以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)。

参考http://www.html-js.com/articl...

设备物理像素、设备独立像素相关推荐

像素相关概念：PPI、DPI、设备像素、独立像素
前言我相信对于像素,英文「pixel」,缩写「px」,这个概念并不陌生吧,不管是设计师设计图片用的单位 px,还是前端工程师在 css 里面的单位 px等等,很多领域都会用到这个单位,但是当我问他们 ...
困扰前端的像素相关概念：PPI、DPI、设备像素、独立像素
我相信对于像素,英文「pixel」,缩写「px」,这个概念并不陌生吧,不管是设计师设计图片用的单位 px,还是前端工程师在 css 里面的单位 px等等,很多领域都会用到这个单位,但是当我问他们一些问 ...
如何秒懂 - 物理像素、CSS 像素、CSS 参考像素、设备独立像素？
本文意在用最短的话,讲清楚这几种像素之间的区别和联系. 文章不是太深,因此对于还不能很好地区分这几种像素的同学来说是非常友好的,如果本文对你有帮助,还请多多点赞收藏哈~ 1. 物理像素(device ...
html逻辑像素和实际像素,物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口...
1.1物理像素手机屏幕横向有828个点手机屏幕纵向上有1792个点同等大小屏幕下,点越多.图像显示越精细上面所说屏幕上一个个点就是物理像素(physical pixel) 物理像素也叫设备像素 ...
android 设备最大像素,设备像素比devicePixelRatio简单介绍
本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台. ...
物理像素，设备独立像素，像素比
物理像素:又称设备像素,j简称pp,设备屏幕上实际有的像素点,如pc端常见分辨率1920 * 1080,意味着在屏幕水平方向上有1920个像素点,垂直方向上有1080个像素点. 屏幕尺寸:屏幕对角线的 ...
移动端物理像素和设备独立像素
https://blog.csdn.net/aiolos1111/article/details/51880223 https://www.cnblogs.com/samwu/p/5341056.ht ...
物理像素，设备独立像素等等收录链接
此像素非彼像素 https://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html 响应式用户界面 https://deve ...
设备像素，设备独立像素，CSS像素
之前学了移动端的开发对设备像素.设备独立像素.CSS像素弄得不太清楚,所以趁周末的时间查了一下,稍加整理一些概念在进行具体的分析之前,首先得知道下面这些关键性基本概念. CSS像素 CSS像素是W ...

设备物理像素、设备独立像素

视觉稿

设备物理像素、设备独立像素相关推荐

最新文章

热门文章