移动端基础知识

一、物理像素（像素点）

• 一个屏幕上的像素点是固定的

二、分辨率

• 每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫分辨率
• 像素点越小，同一方向上容纳的像素个数就越多，一个图片就越精细
  

三、1px=1个物理像素？

显示的原理就是把要显示的数据写入显存区域，然后显示设备读取这些数据，驱动硬件就可以显示了。显示的数据是以像素为单位的，一个像素只能显示一种颜色，但是根据显示颜色的总数不同，每个像素占的位数也不同。如果我想显示黑白，那一位就可以存储了，但如果我想显示16种颜色，就得4位来存储一个颜色，这样的一个存储单位就叫做物理像素。

我们写样式时一个像素记作1px，但是css的px和物理像素是一一对应的吗，是同样的概念么？在pc端是这样的，因为屏幕足够大，一个css像素用一个物理像素来显示，完全可以，pc端默认情况下一个css像素就对应着一个物理像素，但是有没有发现你把分辨率调小以后，显示的内容变大了，但是显示器的物理像素肯定不会变啊，这时候其实就是一个css像素对应着若干个物理像素了，这个是与用户设置有关。

移动设备大小是有限的，而且分辨率不低，甚至比pc端更高，也就是可以显示的物理像素更多，如果和pc端一样，一个css的px和物理像素一一对应，可以想象，显示的内容有多小。这样肯定是不行的，解决这个问题，我们可以很自然的想到，那在移动设备上就别一一对应了，一个css的px对应多个物理像素吧，这样就不至于显示的内容过小了，实际上移动设备也是这么做的，你在开发时写的px和最终渲染显示的物理像素数不是一比一的，可能一个px对应2个物理像素，可能3个物理像素，设备显示的物理像素数和你css的px数的比值就叫做设备像素比（device pixel radio），简称dpr。好了，这样显示内容过小的问题就解决了。

有了dpr之后，有一个问题就是同样的一张图片，我设了宽高的px数，那么在dpr为1的设备上，和dpr为2的设备上显示的效果是一样的，1个px在dpr为1的设备上会用1个物理像素来显示，在dpr为2的设备上会用2*2个物理像素来显示，这样dpr高的优势就体现不出来了，我设备比他的好，你给我的体验是一样的，可能有些用户不爽，我们可以区分对待，对于高dpr的设备，用物理像素更多的高清图片来替代，也就是2x图，3x图等等。

四、逻辑像素

逻辑像素是一个抽象概念。

各种设备：手机，平板，笔记本等逻辑像素。

• 手机：3xx~4xx（短边）之间
• 平板：10寸平板 7xx~8xx （短边）之间
• 笔记本：13寸 1280（长边）
• 24寸显示屏：1920（长边）

五、DPR-设备像素

定义：

• window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
   
   公式表示就是：window.devicePixelRatio = 物理像素 / dips

六、PPI

• 指其对角线的长度,用英寸表示,1英寸=25.4毫米。
• ppi表示的是每英寸所拥有的像素数目，即在一个对角线长度为1英寸的正方形内所拥有的物理像素数。
• 每英寸像素取值（Pixel per inch，简称PPI），意思是每一英寸内的物理像素数量，计算公式是
•