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日