Open sunmaobin opened 7 years ago
最近H5的事情做的多一些，但是有一些移动端的概念还是有些模糊，索性就仔细研究了一下，拿出来共同提高。
也叫做：设备像素（device pixel）。
可以理解为屏幕上的点，这个是跟硬件有关系，跟Web软件语言没一毛钱关系。
你见过霓虹灯吗？LED灯？对！就是那上面一个个会发光的颗粒。
这个概念大家一般喊中文，貌似没见过缩写（当然你可以叫它：pp），因为在软件方面我们很少关注硬件嘛！自然这个概念也就没多大用啦！
这也是一个物理概念，其实就是指一个设备上横竖的点数。
比如：一个LED灯上面，横着放3个灯泡，竖着放4个灯泡，那么这个LED设备的分辨率就是：3 x 4。
当然对应到PC上的显示器上，或者手机端的屏幕行，这一个个的小点，就不是灯泡啦，而是一种新型的发光原件，而且由于排列密集，所以你肉眼根本看不见具体的一个个的点啦而已。
举个栗子：
iPhone手机的主屏：4.7英寸1334x750，就是指：对角线4.7英寸长，高1334个物理像素数，宽750个物理像素数。
是Web编程的概念，指的是CSS样式代码中使用的逻辑像素（或者叫虚拟像素）。
而我们知道，软件的开发离不开硬件的支持，就比如你要在浏览器看到显示效果，就得浏览器支持你呀！
在CSS规范中，长度单位可以分为绝对单位和相对单位，比如：px 是一个 相对单位 ，相对的是 物理像素（physical pixel），这也就是说到底我们平常开发中的 1px 在每个屏幕上怎么显示，完全取决于这个设备！
px
物理像素（physical pixel）
1px
所以，问题就来了，到底CSS像素如何在硬件设备的物理像素上显示呢？往下看。
CSS像素
设备无关像素（dips）
dip/dp
设备无关像素
160ppi
物理像素
硬件
软件
在以前的显示设备上，一个物理像素就显示一个CSS像素，这没什么好争议的，大家也理所当然的认为该这么处理，于是大家都在噪点中度过。
然而在2010年，搭载 Retina(高清屏) 的 iPhone4 出现了！也就是从这时候起，手机屏幕的竞赛才真正开始啦，大家都争先空后的朝着更大尺寸、更高分辨率的方向前进。
Retina
iPhone4
那么 Retina 到底有什么突破呢？原来，它增加了一倍的手机屏幕的物理像素，用2个物理像素点，显示一个CSS像素。OMG，多么有创意的想法！于是还是原来的样子，还是那时的模样，但是由于屏幕点数增多了，所以看着就更加清晰啦。
没有对比就没有伤害：
看出来为什么上面的明显比底下的清晰，噪点少吗？因为它的网格更密集，其实也就是物理像素更多，但是CSS像素没变（比如：苹果的LOGO大小没变，文字大小没变）。
好了，弄明白了这点，我们再往下看一些其它的概念。
简写：dpr
dpr
公式：物理像素数（硬件） / 逻辑像素数（软件），它是设备的属性，而不是一个单位。
其实，比值就是前面说的 物理像素数 除以 CSS像素数。
在javascript中，可以通过 window.devicePixelRatio 获取到当前设备的 dpr。
window.devicePixelRatio
在css中，可以通过 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询，对不同dpr的设备，做一些样式适配。
-webkit-device-pixel-ratio
-webkit-min-device-pixel-ratio
-webkit-max-device-pixel-ratio
当 dpr=2 时，表示：1个CSS像素 = 4个物理像素。因为像素点都是正方形，所以当1个CSS像素需要的物理像素增多2倍时，其实就是长和宽都增加了2倍。
dpr=2
简写：ppi，当然也叫做：dpi。
ppi
dpi
其实，从概念中大家也能知道，它表示了一种从逻辑单位到实际单位的换算。这句话怎么理解呢？
因为大家在实际生活中，已经大体知道1米是多长，1斤是多重，而这种单位就是实际单位。
所以，有了像素密度这个说法，你用英寸来说明屏幕尺寸是一样的，不信，看看你能理解不？
英寸
你是不是明显觉得iphone6更亮！
记住：ppi 说的都是物理像素。
那么，ppi 如何计算呢？因为行业内大家说的手机屏幕都是对角线，比如：4.7英寸，指的是手机屏幕对角线的长度（仅仅是显示的屏幕哦，不包括边框），大家都并没有说手机的宽是多少英寸，高是多少英寸。所以，你计算 ppi 只能用对角线的物理像素数来除以对角线的实际单位啦。
那么计算ppi，首先得计算出对角线的物理像素数，使用勾股定理，即：ppi = 根号下(1920平方+1080平方)/5.2 约等于 294。
那么是不是ppi越大，越清晰呢？理论上是！但是，这得有个取舍。
来吧，感受下2英寸上，给你放1920x1080个物理像素，是不是一团漆黑了？有人喜欢大屏，也有人喜欢小屏，所以嘛这个值只是个参考，你可以对比相同尺寸下的ppi，但是千万不要对比不同尺寸下的，这样你会受伤的！
也叫做：密度无关像素。
指Google提出的用来适配Android海量奇怪屏幕的，之前iOS没有设备独立像素一说，因为之前它的CSS像素都是320px，但是随着iPhone6(375px)、iPhone6 Plus(414px)等不同手机型号出现，导致了手机上能看到的CSS像素点也增加的情况下，也得考虑了。
简写：dips or dp
dips
dp
为什么Google提出这个概念能解决不同设备（或不同密度）下的显示问题呢？ 原因是：不同的手机屏幕上 CSS像素 个数可能不一样，虽然大多数是320px!
假如这时候我们有个正方形是 30x30px，这是CSS像素，再上面的2个机器上看到的大小都一样，只是在iphone4上更清晰些，因为它用4个物理像素显示1个CSS像素。换句话说，如果大家都是手机都是320的CSS像素，那么我们就只管用 px 这个单位就可以了，在每个设备上的看到的大小都一样。
30x30px
如果在iphone5s之前，iOS都不需要关心这个概念，因为你能看到的手机屏幕的CSS像素都是320px。但是，随着iPhone6/plus的出现，就让我们心塞了。
160px x 160px
半个屏幕
不到一半屏幕
明白了吗？就是由于不同的设备屏幕，它所支持的屏幕显示的 CSS像素 个数不同（跟物理像素无关），所以，我们如果用 像素（px） 这个单位去WEB开发的话，在不同的手机下面就显得元素不一样大，这就是 dip 的作用，它的出现也就是为了解决这个问题的。
像素（px）
dip
那么，dip 如何解决这个问题呢？
Google规定：ppi = 160时，1px = 1dip（dip在Android下面是一个单位哦！） 那么，我们就能知道，像素数px = dip * ppi / 160
那么，回到刚才的那个栗子：
80px x 80px
80dip x 80dip
163px x 163px
207px x 207px
如果我们使用 dip 作单位，那么在2台机器上，显示出来的效果，差不多都等于2台机器宽度的一半！目的就达到了。
另外，dip 作为 单位 仅仅适用于Android，但是思想可以用到 iOS 和 Windows 等平台。比如：Windows中修改屏幕分辨率，其实修改的是 dpr ，又由于物理像素不变，其实就等于修改了屏幕中 CSS像素 的个数，这也就是为什么修改了分辨率后，有些东西看着明显变大或者变小的原因了。
单位
iOS
Windows
就是做UI的MM或者GG给你的PS或者切图图片或者标注图片，拿着这个你就可以开始照着勾勒页面啦。当然，小公司可能没有这一步，也许就是产品拿着Axure画的原型直接输出给你，让你照着做页面，那么这个也就算是设计稿啦！相当于要求没辣么高啦。
负责输出设计稿的岗位，叫：UI（User Interface 用户界面）。
有些公司把设计稿也叫做：视觉稿 或者 高保真 图。
视觉稿
高保真
在大一些的公司，岗位分的可能更细，在开始做页面之前，除了会输出上面提到的 视觉稿 ，还会同时给你输出一份具有动态效果示意的文件，一般可能是 GIF 文件。主要是告诉你，页面上某个元素的出现、消失等动画效果。尤其是做一些活动页面，动画要求多的，可能交互稿就很有必要，不然很多时候，你做出来的效果，未必是产品需要的，那就尴尬了。
GIF
负责输出交互稿的岗位，叫：UE（User Experience 用户体验），有的也叫 UX。
UX
UE用的比较多的工具是：Adobe After Effects CC 2015。
Adobe After Effects CC 2015
移动端H5解惑-页面适配（二）
最近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。ppipixers per inch，出现于计算机显示领域（当然也是Android中的习惯叫法）dpidots per inch，出现于打印或印刷领域（当然也是iOS中的习惯叫法）其实，从概念中大家也能知道，它表示了一种从逻辑单位到实际单位的换算。这句话怎么理解呢？
因为大家在实际生活中，已经大体知道1米是多长，1斤是多重，而这种单位就是实际单位。
所以，有了像素密度这个说法，你用
英寸来说明屏幕尺寸是一样的，不信，看看你能理解不？你是不是明显觉得iphone6更亮！
记住：
ppi说的都是物理像素。那么，
ppi如何计算呢？因为行业内大家说的手机屏幕都是对角线，比如：4.7英寸，指的是手机屏幕对角线的长度（仅仅是显示的屏幕哦，不包括边框），大家都并没有说手机的宽是多少英寸，高是多少英寸。所以，你计算ppi只能用对角线的物理像素数来除以对角线的实际单位啦。那么计算ppi，首先得计算出对角线的物理像素数，使用勾股定理，即：ppi = 根号下(1920平方+1080平方)/5.2 约等于 294。
那么是不是ppi越大，越清晰呢？理论上是！但是，这得有个取舍。
没有对比就没有伤害：
来吧，感受下2英寸上，给你放1920x1080个物理像素，是不是一团漆黑了？有人喜欢大屏，也有人喜欢小屏，所以嘛这个值只是个参考，你可以对比相同尺寸下的ppi，但是千万不要对比不同尺寸下的，这样你会受伤的！
设备独立像素（density-independent pixel）
也叫做：密度无关像素。
指Google提出的用来适配Android海量奇怪屏幕的，之前iOS没有设备独立像素一说，因为之前它的CSS像素都是320px，但是随着iPhone6(375px)、iPhone6 Plus(414px)等不同手机型号出现，导致了手机上能看到的CSS像素点也增加的情况下，也得考虑了。
简写：
dipsordp为什么Google提出这个概念能解决不同设备（或不同密度）下的显示问题呢？
原因是：不同的手机屏幕上
CSS像素个数可能不一样，虽然大多数是320px!举个栗子：
假如这时候我们有个正方形是
30x30px，这是CSS像素，再上面的2个机器上看到的大小都一样，只是在iphone4上更清晰些，因为它用4个物理像素显示1个CSS像素。换句话说，如果大家都是手机都是320的CSS像素，那么我们就只管用px这个单位就可以了，在每个设备上的看到的大小都一样。如果在iphone5s之前，iOS都不需要关心这个概念，因为你能看到的手机屏幕的CSS像素都是320px。但是，随着iPhone6/plus的出现，就让我们心塞了。
举个栗子：
160px x 160px的元素，在iphone5s下面看起来宽度正好是半个屏幕大小；不到一半屏幕大小！Why？因为人家像素数量多啊！明白了吗？就是由于不同的设备屏幕，它所支持的屏幕显示的
CSS像素个数不同（跟物理像素无关），所以，我们如果用像素（px）这个单位去WEB开发的话，在不同的手机下面就显得元素不一样大，这就是dip的作用，它的出现也就是为了解决这个问题的。那么，
dip如何解决这个问题呢？那么，回到刚才的那个栗子：
80px x 80px的元素，单位换为80dip x 80dip，在iphone5s下宽度是163px x 163px（由前2行公式得，163px = 80 * 326 / 160）；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解惑-页面适配（二）
参考