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

yagami 发布于2019-08-01 16:17 / 1203人阅读

摘要：设备像素比设备像素比简称定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到设备像素比物理像素设备独立像素在某一方向上，方向或者方向在中，可以通过获取到当前设备的。

视觉稿

在前端开发之前，视觉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...

GPU云服务器云服务器 html物理像素上网设备的物理地址屏幕像素实际像素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50414.html

像素，css像素，物理像素，设备独立像素，分辨率大乱斗

摘要：我们用小米举例，屏幕像素物理像素为，设备独立像素为，也就是说，一个设备独立像素就包含个物理像素，同时我们能得出。本文主要阐述移动端布局中常遇到的一些基本概念，这些概念也适用于PC端，这些概念大概有：像素（pixel），ppi，分辨率，物理像素（physical pixel）， CSS像素，设备独立像素（devicedependent pixel）像素像素是图像显示的基本单位，同时...

LiveVideoStack 2019-08-30 15:54 评论0 收藏0
CSS > 高清缩放原理分析

摘要：最近在研究屏的适配问题，在具体方案讨论之前，陆续做了一些理解笔记，现归纳如下。最近在研究 Retina 屏的适配问题，在具体方案讨论之前，陆续做了一些理解笔记，现归纳如下。具体方案的讨论将另作文章。中的 viewport 是布局视口 initial-scale 等的缩放是基于理想视口的理想视口由设备各自提供，理想视口的宽度也是设备的独立像素所谓独立是说这个设备独立像素和像素...

zhjx922 2019-08-30 12:56 评论0 收藏0
设备物理像素、设备独立像素

摘要：设备像素比设备像素比简称定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到设备像素比物理像素设备独立像素在某一方向上，方向或者方向在中，可以通过获取到当前设备的。视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：首先，选取一款手机的屏幕宽高作为基准(以前是iphone...

cgh1999520 2019-08-21 11:29 评论0 收藏0
设备物理像素、设备独立像素

摘要：设备像素比设备像素比简称定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到设备像素比物理像素设备独立像素在某一方向上，方向或者方向在中，可以通过获取到当前设备的。视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：首先，选取一款手机的屏幕宽高作为基准(以前是iphone...

wums 2019-08-30 15:52 评论0 收藏0
设备像素，CSS像素，设备独立像素

摘要：设备独立像素是一个整体概念，包括了像素，比如像素，只是在机中，像素不叫像素了，而叫设备独立像素。设备像素和独立设备像素的关系实例已为例设备宽高为，可以理解为设备独立像素或像素。获得设备像素比后，便可得知设备像素与像素之间的比例。 1.概念设备像素（device pixel）简写DP 设备像素又称 **物理像素** ，是设备能控制显示的最小单位，我们可以把它看做显示器上的一个点。我们常...

468122151 2019-08-29 16:15 评论0 收藏0