移动端H5解惑-概念术语（一）

[sunmaobin]

最近H5的事情做的多一些，但是有一些移动端的概念还是有些模糊，索性就仔细研究了一下，拿出来共同提高。

物理像素（physical pixel）

也叫做：设备像素（device pixel）。

可以理解为屏幕上的点，这个是跟硬件有关系，跟Web软件语言没一毛钱关系。

你见过霓虹灯吗？LED灯？对！就是那上面一个个会发光的颗粒。

这个概念大家一般喊中文，貌似没见过缩写（当然你可以叫它：pp），因为在软件方面我们很少关注硬件嘛！自然这个概念也就没多大用啦！

分辨率（resolution）

这也是一个物理概念，其实就是指一个设备上横竖的点数。

比如：一个LED灯上面，横着放3个灯泡，竖着放4个灯泡，那么这个LED设备的分辨率就是：3 x 4。

当然对应到PC上的显示器上，或者手机端的屏幕行，这一个个的小点，就不是灯泡啦，而是一种新型的发光原件，而且由于排列密集，所以你肉眼根本看不见具体的一个个的点啦而已。

举个栗子：

iPhone手机的主屏：4.7英寸1334x750，就是指：对角线4.7英寸长，高1334个物理像素数，宽750个物理像素数。

CSS像素（css pixel）

是Web编程的概念，指的是CSS样式代码中使用的逻辑像素（或者叫虚拟像素）。

而我们知道，软件的开发离不开硬件的支持，就比如你要在浏览器看到显示效果，就得浏览器支持你呀！

在CSS规范中，长度单位可以分为绝对单位和相对单位，比如：px 是一个 相对单位 ，相对的是 物理像素（physical pixel），这也就是说到底我们平常开发中的 1px 在每个屏幕上怎么显示，完全取决于这个设备！

所以，问题就来了，到底CSS像素如何在硬件设备的物理像素上显示呢？往下看。

先纠正一个概念（dips）

• 有些人把 CSS像素 又叫做 设备无关像素（dips）（比如：这里），又说这个概念跟真正的 dip/dp 不是一回事！真实气愤！就是这个概念的含糊不清，搞的我也头晕目眩的。
• 这里纠正一下，以后大家说到 设备无关像素 就是指 dip/dp ，是我下文专门有一节讲述的概念，它就是以 160ppi 为基准的一个相对单位，用来解决Android上面屏幕不统一问题的。
• 其余的说法，就是 物理像素 和 CSS像素，分别代表 硬件 和 软件的单位，别再搞错了。

捅破这层窗户纸

在以前的显示设备上，一个物理像素就显示一个CSS像素，这没什么好争议的，大家也理所当然的认为该这么处理，于是大家都在噪点中度过。

然而在2010年，搭载 Retina(高清屏) 的 iPhone4 出现了！也就是从这时候起，手机屏幕的竞赛才真正开始啦，大家都争先空后的朝着更大尺寸、更高分辨率的方向前进。

那么 Retina 到底有什么突破呢？原来，它增加了一倍的手机屏幕的物理像素，用2个物理像素点，显示一个CSS像素。OMG，多么有创意的想法！于是还是原来的样子，还是那时的模样，但是由于屏幕点数增多了，所以看着就更加清晰啦。

没有对比就没有伤害：

看出来为什么上面的明显比底下的清晰，噪点少吗？因为它的网格更密集，其实也就是物理像素更多，但是CSS像素没变（比如：苹果的LOGO大小没变，文字大小没变）。

好了，弄明白了这点，我们再往下看一些其它的概念。

设备像素比（device pixel ratio）

简写：dpr

公式：物理像素数（硬件） / 逻辑像素数（软件），它是设备的属性，而不是一个单位。

其实，比值就是前面说的 物理像素数 除以 CSS像素数。

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

在css中，可以通过 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询，对不同dpr的设备，做一些样式适配。

举个栗子：

当 dpr=2 时，表示：1个CSS像素 = 4个物理像素。因为像素点都是正方形，所以当1个CSS像素需要的物理像素增多2倍时，其实就是长和宽都增加了2倍。

没有对比就没有伤害：

像素密度（pixers per inch）

简写：ppi，当然也叫做：dpi。

• ppi pixers per inch，出现于计算机显示领域（当然也是Android中的习惯叫法）
• dpi dots per inch，出现于打印或印刷领域（当然也是iOS中的习惯叫法）

其实，从概念中大家也能知道，它表示了一种从逻辑单位到实际单位的换算。这句话怎么理解呢？

因为大家在实际生活中，已经大体知道1米是多长，1斤是多重，而这种单位就是实际单位。

• 那么我告诉你：我手机屏幕是4.7英寸的，你大概有点感觉是吧？（1英寸=2.54厘米）！
• 但是如果为告诉你：我手机屏幕是320像素的，你是不是就懵逼了？

所以，有了像素密度这个说法，你用英寸来说明屏幕尺寸是一样的，不信，看看你能理解不？

• 我的iphone5屏幕上每2.54厘米上有320个小灯泡~（ppi=320）
• 我的iphone6屏幕上每2.54厘米上就有375个小灯泡呢！（ppi=375）

你是不是明显觉得iphone6更亮！

记住：ppi 说的都是物理像素。

那么，ppi 如何计算呢？因为行业内大家说的手机屏幕都是对角线，比如：4.7英寸，指的是手机屏幕对角线的长度（仅仅是显示的屏幕哦，不包括边框），大家都并没有说手机的宽是多少英寸，高是多少英寸。所以，你计算 ppi 只能用对角线的物理像素数来除以对角线的实际单位啦。

那么计算ppi，首先得计算出对角线的物理像素数，使用勾股定理，即：ppi = 根号下(1920平方+1080平方)/5.2 约等于 294。

那么是不是ppi越大，越清晰呢？理论上是！但是，这得有个取舍。

没有对比就没有伤害：

• 2英寸1920x1080的主屏，ppi=765（瞎写的）
• 4英寸1920x1080的主屏，ppi=382（YY的）
• 4.7英寸1920x1080的主屏，ppi=326（vivo x7）
• 5.2英寸1920x1080的主屏，ppi=294（HTC One）

来吧，感受下2英寸上，给你放1920x1080个物理像素，是不是一团漆黑了？有人喜欢大屏，也有人喜欢小屏，所以嘛这个值只是个参考，你可以对比相同尺寸下的ppi，但是千万不要对比不同尺寸下的，这样你会受伤的！

设备独立像素（density-independent pixel）

也叫做：密度无关像素。

指Google提出的用来适配Android海量奇怪屏幕的，之前iOS没有设备独立像素一说，因为之前它的CSS像素都是320px，但是随着iPhone6(375px)、iPhone6 Plus(414px)等不同手机型号出现，导致了手机上能看到的CSS像素点也增加的情况下，也得考虑了。

简写：dips or dp

为什么Google提出这个概念能解决不同设备（或不同密度）下的显示问题呢？
原因是：不同的手机屏幕上 CSS像素 个数可能不一样，虽然大多数是320px!

举个栗子：

• iPhone3GS，物理像素320，dpr=1，所以决定了它的CSS像素320；
• iPhone4，物理像素640，dpr=2，所以，决定了它的CSS像素还是320；

假如这时候我们有个正方形是 30x30px，这是CSS像素，再上面的2个机器上看到的大小都一样，只是在iphone4上更清晰些，因为它用4个物理像素显示1个CSS像素。换句话说，如果大家都是手机都是320的CSS像素，那么我们就只管用 px 这个单位就可以了，在每个设备上的看到的大小都一样。

如果在iphone5s之前，iOS都不需要关心这个概念，因为你能看到的手机屏幕的CSS像素都是320px。但是，随着iPhone6/plus的出现，就让我们心塞了。

举个栗子：

• 你有个 160px x 160px 的元素，在iphone5s下面看起来宽度正好是 半个屏幕 大小；
• 在iphone6plus下面，看起来宽度貌似只占了屏幕宽度的 不到一半屏幕 大小！Why？因为人家像素数量多啊！

明白了吗？就是由于不同的设备屏幕，它所支持的屏幕显示的 CSS像素 个数不同（跟物理像素无关），所以，我们如果用 像素（px） 这个单位去WEB开发的话，在不同的手机下面就显得元素不一样大，这就是 dip 的作用，它的出现也就是为了解决这个问题的。

那么，dip 如何解决这个问题呢？

Google规定：ppi = 160时，1px = 1dip（dip在Android下面是一个单位哦！）
那么，我们就能知道，像素数px = dip * ppi / 160

那么，回到刚才的那个栗子：

• 将 80px x 80px 的元素，单位换为 80dip x 80dip ，在iphone5s下宽度是 163px x 163px（由前2行公式得，163px = 80 * 326 / 160）；
• 而这个元素在iphone6plus下，宽度是 207px x 207px（163px = 80 * 414 / 160）；

如果我们使用 dip 作单位，那么在2台机器上，显示出来的效果，差不多都等于2台机器宽度的一半！目的就达到了。

另外，dip 作为 单位 仅仅适用于Android，但是思想可以用到 iOS 和 Windows 等平台。比如：Windows中修改屏幕分辨率，其实修改的是 dpr ，又由于物理像素不变，其实就等于修改了屏幕中 CSS像素 的个数，这也就是为什么修改了分辨率后，有些东西看着明显变大或者变小的原因了。

其它

设计稿

就是做UI的MM或者GG给你的PS或者切图图片或者标注图片，拿着这个你就可以开始照着勾勒页面啦。当然，小公司可能没有这一步，也许就是产品拿着Axure画的原型直接输出给你，让你照着做页面，那么这个也就算是设计稿啦！相当于要求没辣么高啦。

负责输出设计稿的岗位，叫：UI（User Interface 用户界面）。

有些公司把设计稿也叫做：视觉稿 或者 高保真 图。

交互稿

在大一些的公司，岗位分的可能更细，在开始做页面之前，除了会输出上面提到的 视觉稿 ，还会同时给你输出一份具有动态效果示意的文件，一般可能是 GIF 文件。主要是告诉你，页面上某个元素的出现、消失等动画效果。尤其是做一些活动页面，动画要求多的，可能交互稿就很有必要，不然很多时候，你做出来的效果，未必是产品需要的，那就尴尬了。

负责输出交互稿的岗位，叫：UE（User Experience 用户体验），有的也叫 UX。

UE用的比较多的工具是：Adobe After Effects CC 2015。

更多

移动端H5解惑-页面适配（二）

参考

1. 淘宝网触屏版为什么rem跟px混用？有什么好处？为什么不都用rem?
2. 完全理解px,dpr,dpi,dip
3. 【原创】移动端高清、多屏适配方案
4. Android上dip、dp、px、sp等单位说明
5. Meta viewport
6. A tale of two viewports — part one
7. A tale of two viewports — part two
8. 两个viewport的故事（第一部分）
9. 两个viewport的故事（第二部分）
10. Android上常见度量单位【xdpi、hdpi、mdpi、ldpi】解读