pt(磅)
- 计算公式:1 pt(磅)= 1 / 72 inch (1 inch = 2.54 cm)
- pt(磅)的使用就是为了平面设计师方便控制输出图像的实际大小
dot(点)
- dot(点)很抽象,指的是采样或输出的最小单位,是一个物理概念
- 不同的设备里会和不同的具体事物关联起来:打印机的 dot(点)指墨点,扫面仪的 dot(点)指色彩信息,屏幕设备的 dot(点)指一个物理实际像素
- 屏幕设备里的一个灯点对应设计师图纸里的一个物理像素,这也是设计师使用物理像素为最小单位制图的原因:方便控制细节(例如一个物理像素高度线条在高分屏上代码实现出现小数,用切图控制更好),并且灯点数目是不会受各个平台单位定义方法影响的
pt(逻辑像素)
- 在非 Retina 设备上,一个 pt(逻辑像素)对应屏幕上的一个灯点(物理像素,设计稿中的基本单位)
- 在 Retina 2x 设备上,一个 pt(逻辑像素)对应屏幕上的四个灯点
- 在 Retina 3x 设备上,一个 pt(逻辑像素)对应屏幕上的九个灯点
- Retina 的本质就是在内容,大小完全不变的情况下加大一个逻辑像素被屏幕显示的灯点数量,从而加强清晰度
dpi(点每英寸)
- 顾名思义,就是每英寸有多少个采样点的意思,所以 dpi(点每英寸)也叫物理密度
- 关于 dpi(点每英寸)的误解:dpi(点每英寸)超过 300 肉眼无法识别物理像素只是苹果的营销手段而已(100 米开外的广场屏幕也是无法识别物理像素的)
ppi(系统的像素每英寸)
- ppi(系统的像素每英寸)是根据最早的时候市面上常见的 dpi(点每英寸)硬性规定一个默认值( Windows 下是 96, 其他系统都是 72 )
- PS 的 100% 显示的尺寸大小其实就是在规定的 ppi(系统的像素每英寸)下显示的尺寸大小,这个尺寸和真实设备的尺寸是不一致的,说白了,就是像素在 PS 里尺寸很大(以 ppi 显示),到手机上变小了(以 dpi 显示)
- 目前为止,除了 Windows 系统软件,其他所有涉及图像设备的 ppi(系统的像素每英寸)都遵循苹果公司 1 px = 72 inch 的标准,包括浏览器
- 实际设备的 dpi 越高于 ppi, 显示尺寸就会越小于真实尺寸
- 苹果规定 3GS 上 1 pt(逻辑像素)= 1 px, 然后之后的设备 dpi 成倍上升,控制屏幕,使其能较好控制真实的物理尺寸(例如触控范围),不受 ppi 的影响,在系统逻辑像素层,ppi 一直都是 72
px(渲染像素)
- 所谓渲染像素,即系统处理出来的原始画面的尺寸,即是系统基于 pt(逻辑像素)进行对应倍增而得的结果,这个结果并不一定会等同于实际像素
- iPhone 6 Plus 采用了 2208 乘以 1242 的逻辑像素,但却因为产能不足把 2208 乘以 1242 的画面塞到 1080P 的屏幕中,导致了 6 Plus 的渲染像素和实际像素不能一一匹配,画面被缩小而模糊
- iPhone 6 开启 Display Zoom 功能时,逻辑像素与 iPhone 5 相同,即 320 pt 乘以 568 pt,渲染像素进行 @2x 处理,但 iPhone 6 的物理像素为 750 乘以 1334,比此时的渲染像素要高,所以会将画面拉大显示而模糊
- iPhone 6 Plus 开启 Display Zoom 功能时,逻辑像素与 iPhone 6 相同,即 375 pt 乘以 667 pt,渲染像素进行 @3x 处理,但 iPhone 6 Plus 的物理像素为 1080 乘以 1920,比此时的渲染像素要低,所以会将画面缩小显示而模糊
- 由此可见,所谓 Display Zoom 技术就是在实际像素和渲染像素处理倍数不变的情况下,改变画面显示的逻辑像素(目前的规律是把逻辑像素向下一个级别),从而达到改变渲染像素的目的,渲染像素一旦被改变,画面就会以不同的大小显示,从而得到不同的视觉效果(目前的视觉效果即是:渲染像素变小,实际像素不变,画面被拉大,所以能显示更多的内容)
dp(设备无关像素)
- Android 把屏幕密度分为了四个广义的大小:ldpi 240 乘以 320 低 (120 dpi),mdpi 320 乘以 480 中 (160 dpi),hdpi 480 乘以 800 高 (240 dpi),xhdpi 720 乘以 1280 超高 ( 320dpi ),其中 google 规定 160dpi 作为屏幕适配的基准(注意,这里的分辨率为每种广义大小的常见分辨率)
- 在 160dpi 的机器上 1 dp = 1 px,1 sp = 1 px( Android 允许用户自定义文字尺寸(小,正常,大,超大),当尺存为(正常)时 1 sp = 1 dp = 0.00625 inch,而当文字尺寸是(大)或(超大)时,1 sp > 1 dp = 0.00625 inch,这也是 Google 建议使用sp 作为字体尺寸定义的原因,如果用 dp 控制字体,是不会跟随系统调整变化的)
- px / dp = dpi / 160(说白了,就是当物理像素密度 160 dpi 时,1 px = 1 dp,可推算出 320 dpi 时,2 px = 1 dp,以此类推)
- 由此可见,dp(设备无关像素)和 pt(逻辑像素)基本属于同一个玩意儿,dp(设备无关像素)基于 160 dpi 作为基准定位,pt(逻辑像素)基于 iPhone 3G 作为基准定位,iPhone 3G 也正是 160 dpi
rem(相对于根元素的字体大小)
- Html 的 font-size 可以等比改变所有用了 rem 单位的元素,通过一段 js 根据浏览器当前的分辨率改变 font-size 的值,不管在任何分辨率下,页面的排版都是按照等比例进行切换,并且布局没有乱
- 值得指出的是 em(相对于父元素的字体大小)已经不太需要了,1 em 就是父元素指定的字号大小
- PC 上默认的根元素 font-size 所有的浏览器都是 16 px