Pixel,csspixel,physicalpixel,device-independentpixel,resolutionchaos,ppi,resolution,物理像素（physicalpixel）,CSSpixel,deviceindependentpixel（devicedependentpixel）像素像素是图像显示的基本单位，pixel是一个抽象概念和一个相对单位PPIPPI全称：pixelperinch，即每英寸的像素值。更准确地说，应该是像素密度，即单位物理面积的像素值。假设我们有上面这张图，它有相同的尺寸，比如1*1尺寸，但是物理区域内的PPI分别为1、2、5、10、20、50、100。从图中可以明显看出，随着PPI的增加，像素点的数量增加，图像变得更清晰，而我们的像素点的长度也变成了，1/1,1/2,1/5,1/10,1/20、1/50、1/100。可以知道不同ppi下像素是不一样的，讨论像素的大小是没有意义的。分辨率分辨率一般是指显示系统区分细节的能力。任何可以显示的图像都称为显示系统，例如显示器、投影仪或照片。常用的分辨率单位有：dpi（每英寸点数）、lpi（每英寸线数）和ppi（每英寸像素数）。从单位来看，分辨率是一个比值，是物理单位的比值。所以，当有人说屏幕分辨率是640*1320的时候，你要小心了，问单位是ppi？分辨率？lpi？RetinadisplayRetinadisplay不仅仅是屏幕的革新，它对我们对各种单位的理解有很大的帮助。我们先来分析一下什么是视网膜显示器，它提出的概念是什么。？Retina采用的技术是将更多的像素点压缩到一个屏幕中，从而达到更高的分辨率，提高屏幕显示的精细度。我们来看看没有视网膜屏幕的iPhone3GS和iPhone4iphone3GSiphone，这是第一个使用4的两代iPhone的物理尺寸（屏幕的宽度和高度以英寸为单位）是一样的。从上图可以看出，iphone4的显示效果明显优于iphone3GS。iPhone4的分辨率虽然有所提升，但不同于普通电脑显示器为了显示更多的内容，而是在显示相同内容的情况下提升了画面的细腻度。这种改进方法是通过增加屏幕单位面积的像素数，即像素密度来提高分辨率。这样做的主要目的是提高屏幕显示的精细度。以第三代RetinaDisplayMacBookPro为例，工作时，显卡以4个为一组渲染2880x1880像素，输出原屏幕一个像素显示大小区域内的图像。因此，用户看到的图标和文本与原始1440x900分辨率显示屏的尺寸相同，但细节却增加了4倍。注：在桌面显示器中，我们对显示分辨率进行了调整，例如从800*600调整为1024*768时，屏幕上的文字图标会变小，显示的内容会更多。而Retina显示方式则不会出现此类问题。换句话说，Retina显示技术解决的是显示屏幕的精细度问题，而不是显示内容的容量问题。怎么理解呢？也就是说，我们再来看下devicepixelconceptdeviceindependentpixelddp为什么是“每组四个”？并让这四组显示“原始屏幕的一个像素”？这大概就是Retina显示技术的一种体现吧。而这个“每组四个”的“大像素”可以称为“deviceindependentpixel”，deviceindependentpixel，或者density-independentpixel，它可以是系统中的一个点，这个点代表一个可以编程的点由程序使用的虚拟像素然后由相关系统转换为物理像素。“设备无关像素”也称为“CSS像素”，这是一个形象的名词，在CSS中倾向于表示与尺寸的对应关系。设备独立像素和物理像素的对应关系可以这样看：我们在视网膜显示器上挖了一个洞，现在我们需要把它填满。为什么桌面显示器在分辨率增大时显示的内容更多？视网膜内容保持不变，但变得更加细腻？这是设备独立像素的效果。Retina的设备无关像素是固定的。当我们增加像素数量时，可以使用更多的像素来渲染与设备无关的像素所在的区域，这势必会更加细腻。随着分辨率的提高，像素数的增加，独立像素所包含的像素数不会增加，但是随着像素数的增加，独立像素会越来越多。一个像素对应一个独立的像素，所以显示内容的物理像素设备就更多了，可以控制显示的最小单位。我们可以将这些像素视为显示器上的单个点。我们在deviceindependentpixels中提到过，为什么retina是“每组四个”，这里的四个代表物理像素，这组叫做deviceindependentpixels。这个与设备无关的像素与我们的前端CSS像素非常相似。作为网页开发者，我们接触到的样式单位像素比较多，用来控制元素的样式。这里的像素称为CSS像素。CSS像素有什么特别之处？我们可以借用quirksmode的这个例子：假设我们用PC浏览器打开一个页面，此时浏览器的宽度是800px，页面上有一个400px宽的块级元素容器。很明显此时块容器应该占据了页面的一半。但是如果我们把页面放大（通过“Ctrl键”加“+键”），则放大200%，是原来的两倍。此时块容器横向占据了整个浏览器。矛盾的是，此时我们既没有调整浏览器窗口的大小，也没有改变块元素的css宽度，但它看起来是两倍大——这是因为我们将CSS像素加倍了。当CSS像素与屏幕像素1:1大小相同时：CSS像素（黑边）开始被拉伸。此时1个CSS像素大于1个屏幕像素，也就是说默认情况下，一个CSS像素应该等于一个物理像素。宽度，但浏览器的放大操作使一个CSS像素等于两个物理像素宽度。后面会看到更复杂的情况，在高PPI的设备上，CSS像素即使在默认状态下也相当于多个物理像素的大小，换句话说相当于一个设备无关像素。从上面的例子可以看出，CSS像素始终只是一个相对值。设备像素比（DevicePixelRatio）设备像素比=设备物理像素/设备独立像素设备像素比可以通过js中的devicePixelRatio参数获取（页面的viewport需要设置content="width=device-width")iPhone4设备像素比为2，线长（水平、垂直、对角线）上的物理像素个数与设备独立像素个数的对应关系为2。根据这个对应关系，设备的独立像素数一般可以由屏幕的物理分辨率和设备像素比决定。那么我们在做手机网站的时候，设置viewport为content=”width=device-width”，设备的独立像素等于css像素。硬核总结：我用一个移动端的常见问题把上面的名词串联起来。由于我们部门只开发小米浏览器，适配其实对我们来说不是很复杂，因为我们的screendpr主要是2/2.75/3，而我们的designer一般设计稿都是基于iPhone6s设计的，所以我只分析casewheredpr为3，我们在前端拿到设计稿的时候，在保存切图的时候首先要做的就是将切图设置为3的倍数，比如212*112，我们手动微调到213*114。为什么是这样？因为我们在移动端需要的图片要将原图除以3，即图片需要71*38。正如我们在上面的文章中提到的，其实我们只需要了解物理像素、设备无关像素和CSS像素就可以解决这个问题。其中，我们无法控制物理像素和设备无关像素，这些像素已经被其他人的设备设置好了。我们以小米5X为例，屏幕像素（物理像素）为：1080*1920，设备独立像素为：360*640，也就是说一个设备独立像素包含3*3个物理像素，并且我们可以得到输出：dpr=1080*1920/360*630=3。我们的css像素其实等于设备无关像素，但是我们的设计师画图的时候坐标系是1080*1920，这不是标准的360*640，所以我们需要将设计师的图片/3进行分割，结果是移动端的Correctsize。其实不管你的分辨率有多高，对于普通用户来说，分辨率和物理像素的多少才是最直观的评价标准。而我们的前端工程师关注的是背后设备的独立像素，因为我们的布局是使用设备的独立像素而不是物理像素作为参考。因此，屏幕的分辨率是已知的。我们通过js的window.devicePixelRatio知道dpr，这样我们就可以知道设备的独立像素的规格，从而让我们的css像素和设备的独立像素保持一致，这样我们的前端可以根据合适的裁剪图片，还原设计稿！
