关于设备像素比dpr的理解

更新日期: 2019-05-06 阅读: 4.6k 标签: 像素

做手机端项目,不可避免要寻找一个手机端页面与手机屏幕适配最佳方案。在这之前,我觉得还是要去理解一下dpr(设备像素比)。我们还要了解一些与dpr相关的概念:


(1)物理像素(physical pixel)

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

如:iPhone6上就有750*1334个物理像素颗粒。


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

设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),有时我们也说成是逻辑像素。


(3)设备像素比(device pixel ratio )简称dpr

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系。


(4)公式:

设备像素比 = 物理像素 / 逻辑像素(px)  Ps:在某一方向上,x方向或者y方向

如:iPhone6的dpr为2,物理像素750(x轴),则它的逻辑像素为375。 也就是说,1个逻辑像素,在x轴和y轴方向,需要2个物理像素来显示,如下图:


问题:为什么以iPhone6为标准的设计稿的尺寸是以750px宽度来设计的呢?  

iPhone6的满屏宽度是375px(Viewport’s device-width (in CSS pixels):375px),而iPhone6采用的视网膜屏的物理像素是满屏宽度的2倍,并且设计师所用的PS设计软件分辨率和像素关系是1:1。所以为了做出的清晰的页面,设计师一般给出750px的设计图,我们再根据需求对元素的尺寸设计和压缩。  



本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!

链接: https://fly63.com/article/detial/3208

LayoutUnit & Subpixel Layout

为了更好的支持移动端和 PC 端的缩放,WebKit 增加了subpixel layout(次像素/亚像素布局)为此他们还改变了 rendering tree,一个次像素单元在 WebKit 内

有趣的CSS像素艺术

像素艺术作为一种遗失的艺术形式,与超清晰,高分辨率图片相比黯然失色。我在CodePen上浏览时偶然发现了一些像素艺术,它提醒我这种艺术是多么令人敬畏!

如何解决移动端 Retina 屏 1px 像素问题 ?

以 iphone6 为例,iphone6 的屏幕宽度为 375px ,设计师做的视觉稿一般是750px ,也就是 2x ,这个时候设计师在视觉稿上画了 1px 的边框,于是你就写了 border:1px ,so...1px边框问题产生了。

js图片转像素画的实现方式

首先,让我们来看一下什么是像素图。像素图就是由一个个像素点构成的图片,也就是说像素图是图像在计算机上表示的一种方式。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!