移动web开发基础(一)——像素

  这篇文章要弄清楚2个问题:一、什么是逻辑像素和物理像素;二、这两者有什么关系。

  对于问题一,先抛出两个概念。我们经常使用的px就是逻辑像素,是浏览器使用的抽象单位;物理像素又和dp/pt(设备无关像素)、dpr(设备像素缩放比)有关。对于问题二,逻辑像素和物理像素可以通过下面的公式转换:1px=(dpr^2)dp.

  那么现在问题来了,对于不同设备,dpr又是多少呢?

  我们可以通过下表来确定不同设备的dpr:

  retina屏dpr都大于等于2。

  上面的表格发现ppi,那又是什么东东呢?

  ppi是物理设备的屏幕每英寸的像素数量,即像素密度。不好理解的话,我就举个实例,满大街都是的LED屏(商店门口和公交车上显示信息的那块电子屏),其实里面是一排排的发光二极管,通过让不同位置的二极管发光来组合成一定的信息。想象一下,如果只有4个二极管,是不是很难显示出复杂的图案?但是如果有很多呢?是不是二极管密度越大,更容易显示出复杂的信息,而且图案看起来更细腻?说到这里,ppi就很好理解了吧。

  ppi可以通过下面的公式计算:

  举个栗子:iPhone 5的屏幕ppi计算,iPhone 5屏幕分辨率为1136x640像素,屏幕尺寸为4英寸。代入公式ppi=√(1136²+640²) / 4,结果为326ppi。

  现在我们实际运用一下公式1px=(dpr^2)dp。先假设有一个dpr为2的设备,那么,1px=2*2dp,表示1px需要设备用4个像素点来渲染,如下图:

  在平面上,四个像素点排列成正方形,组成一个1px的点。那么可以推出,在直线上,1px=2dp。

  那么,iPhone 5屏幕ppi为326>320,故dpr=2  =>  1px=2dp  =>  设备分辨率1136x640转换为逻辑像素为568x320px,即320x568px。

  到这里,于是我们知道了什么是逻辑像素,什么是物理像素,以及两者要怎么换算。

参考:

《Hello,移动WEB——pixel像素基础》http://www.imooc.com/video/9564/0

原文地址:https://www.cnblogs.com/lovelyun/p/5295360.html