H5开发基础之像素、分辨率、DPI、PPI

H5开发基础之像素、分辨率、DPI、PPI

 html5

 阅读约 4 分钟

​2016-09-03于坝上草原

背景知识：

目前绝大部分显示器都是基于点阵的，通过一系列的小点排成一个大矩形,通过每个小点显示不同的颜色来形成图像，我们把每个小点称为一个像素 (pixel)。

概念点：

1. Dot：物理属性的一个点，打印机或屏幕通过这些点把图片print出来。一块屏幕的Dot的点是固定的。对于一台具体的显示器，多个点(dots)排列起来之后，构成的一个整体的宽度和高度，我们称之为显示器的“物理尺寸 (physical size)”，单位是“宽度x高度”，例如 12"x7.5".

2. Pixel：像素，是一个带颜色的方块，一个Pixel可能由很多个物理Dot组成。在具体设置下，显示器有多少行多少列像素叫做显示器的“分辨率 (geometry)”，表示方法是“宽度像素个数x高度像素个数”，例如 1440x900.在同样的分辨率下，每个小点(dots)的尺寸仍然是可以大可以小的。同样是 900 个点，如果每个点 1 毫米，那就是 90 厘米，如果每个点 1 厘米，那就是 9 米。

3. DPI：dots per inch，称作解析度，一英寸里能包含的Dots的个数，这个像素指的是物理像素，实际存在的。

4. PPI：pixels per inch，每英寸有多少个pixel。PPI=像素数量（√（x²+y²））/物理尺寸（英寸数），x是x轴上的像素数，y是y轴上的像素数，要用对角线来计算，是因为屏幕对角线长度（屏幕尺寸，物理尺寸）是厂商制造时就定好的精确数值。

5. DP：Device independent Pixel（设备独立像素）的缩写，也可叫DiP，1dp表示在屏幕像素点密度为160ppi时1px长度，是andriod的概念。

6. PT：point，是一个长度单位，通用标准是 1 pt = 1/72 inch（1 inch = 2.54 cm），这个标准又称PostScript point，Point 和厘米、毫米什么的单位没有本质区别，只是长度不同，pt和屏幕没关系，只和文档分辨率有关系，是苹果的概念。

7. DP和PT是用来定义应用在不同设备、不同DPI下的标准单位。

8. Px: css pixels逻辑像素，浏览器使用的抽象单位

9. DPR：device pixel ratio，设备像素缩放比，平面上：1px = (dpr)^2 * dp，纬度上：1px = dpr * 2

例：iphone5：分辨率640px * 1136px，PPI：326PPI，dpr图表可得iphone5的dpr为2, 根据纬度上：1px = dpr *  px, iphone5的屏幕为320px * 568px.

10. 屏幕分辨率

分辨率就是屏幕上的像素数，例如2560×1440px的屏幕，屏幕横向有2560个像素，纵向有1440个像素。27"显示器有2560×1440px的点对点分辨率，109PPI。如果把屏幕分辨率调低，会发现屏幕上的窗口、icon都变大了，因为27"上的像素变少了。其实像素还是那么多像素，PPI还是那个PPI，像素变少是因为当你把屏幕分辨率调低时，操作系统会通过拉伸来填充屏幕，这个时候CPU/GPU会用点对点的像素计算出来一套新的分辨率。

屏幕：

HD：1280 * 720px分辨率

full HD: 1920 * 1080px分辨率

4K: QHD或者UHD（超高清）,最小分辨率是3840×2160px,另一个常见分辨率是4096×2160px

视网膜屏：Retina是一种规格，是通过减小像素的体积和像素之间的间距，大幅提高屏幕的ppi值。Retina屏dpr大于等于2。

阅读 91发布于 12月19日