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

时间 2019-11-07

标签移动 h5 解惑概念术语栏目无线繁體版

原文原文链接

本文原文发表于2016年个人github，可是直到如今为止还有不少童鞋问我相关概念，因而整理下再分享一下。javascript

原文连接：github.com/sunmaobin/s…css

物理像素（physical pixel）

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

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

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

这个概念你们通常喊中文，貌似没见过缩写（固然你能够叫它：pp），由于在软件方面咱们不多关注硬件嘛！天然这个概念也就没多大用啦！github

分辨率（resolution）

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

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

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

举个栗子：iphone

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解惑-页面适配（二）