浅谈移动Web开发（上）：深入概念

如果你是一个开始接触移动Web开发的前端工程师，那么你或许也遇到了和我曾经遇到的过问题：有太多新的概念需要掌握，太多相似的概念需要区分。没关系，我将用两篇文章的篇幅来解决这些问题。上篇文章关于解释和区分一些入门级别概念。这些概念你或许一直在各种场合看到或者听说，好像熟的很，但你真的了解它们背后的含义吗？下篇文章我们就需要用到这些概念，聊一聊移动设备上的图片加载方案。至于响应式设计，已经有太多写的非常好的文章来叙述它们，这次在这里我就不赘述了。
　　我们先从听说最多一个概念——PPI开始。
　　PPI
　　什么是PPI
　　PPI的复杂之处在于如果他所属的上下文环境不同，意义也会完全不一样。 当我们在谈论显示设备的PPI时，它代指的屏幕的像素密度；当我们在谈论和图片相关时，我们谈论的是打印时的分辨率或者打印机的打印精度。这里我们主要描述的前一种情况，关于后两种，我们在文章的最后会谈到，有兴趣的同学可以阅读。
　　PPI全称为Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。


　　如上图所示，在1英寸单位内面积内拥有的像素越多，密度越大，PPI值就越高。但像素密度的实际意义是什么？它表达的是什么？或高或低对设备显示来说有什么影响？
　　一般来说，我们当然希望PPI值越高越好，因为更高的PPI意味着在同一实际尺寸的物理屏幕上能容纳更多的像素，能够展现更多的画面细节，也就意味着更平滑的画面。原理如下：


　　什么是Pixel
　　但你有没有仔细相关Pixel Per Inch中的pixel像素的概念究竟指的是什么样的像素？你可能会反问我像素难道还分很多种不成？我可以很确定的告诉你，是的。
　　设备像素
　　无论是早期的CRT显示器还是如今的LCD显示器，都是基于点阵的。也就是说通过一些列的小点排列成一个大的矩形，不同的小点通过显示不同的颜色来显示成图像。比如下图就是LCD显示器上一个6x6个小点排列成的矩阵：

　　注意每一个像素（pixel，也可以称之为dot）又是由三个子像素(subpixel)红绿蓝组合而成。当需要显示图片信息时，