美文网首页
布局像素的辨析

布局像素的辨析

作者: 郝翔 | 来源:发表于2016-06-27 08:59 被阅读40次

物理分辨率的概念

所谓物理分辨率,是指一块屏幕上,横向有多少个像素点,纵向有多少个像素点,比如苹果5的分辨率是640x1136

屏幕尺寸

屏幕尺寸指屏幕对角线的长度,根据横向长度和纵向长度进一步计算得到,使用英寸为单位,比如苹果5的尺寸为4.0英寸

像素密度

像素密度是一个重要的概念,指每英寸上有多少像素点,通过这个参数可以很明确的表示屏幕清晰程度。计算公式为屏幕上所有的物理像素点,除以屏幕尺寸(对角线长度,英寸)。常见的一个临界值是300ppi,这个数字来自于苹果4发布会,乔布斯宣称达到这个分辨率的手机,如果正常距离使用,人眼已经无法分辨屏幕上细微的方格了,苹果一向是善于包装旧概念的,retina display 一词就是被乔布斯创造出来,翻译过来就是这几年经常听到的视网膜显示屏。

逻辑像素

逻辑像素对于开发人员极其重要,是开发过程中表示界面尺寸的一种尺寸,这个需要和物理像素,即物理分辨率做区分。经常听到的一句话就是

物理像素是设备硬件支持的,逻辑像素是软件可以达到的。

这句话很好理解,举个简单的例子,之前的苹果3gs,分辨率是480 * 320,3.5英寸,风靡世界的苹果4,分辨率为它的2倍,960 * 640。注意,这里表达的分辨率就是指物理像素。
在苹果4上,纵向有960个像素点组成,横向则为640个像素点。
此时如果在这两部手机上开发,继续使用px布局,即使用物理像素进行开发,就会遇到一些问题,在苹果3gs上开发的布局,在苹果4上无法充满屏幕。
苹果此时引入一个概念,pt,即点(point),在这之前,1pt是等于一个像素的,逻辑像素与物理像素是相同的。
在苹果4上出现了不同,1pt = 2px,也就是说,一个英寸上的物理像素数目,是逻辑像素的二倍。举个例子,在开发过程中,我们使用14pt的高度,在3gs上面,显示就是14px,也即上面说的物理像素和逻辑像素是相同的,但是在苹果4上面,显示为28px,他们所占的物理尺寸是相同的(我们肉眼看到的尺寸),我们可以可以看到14pt的逻辑尺寸,既充满了3gs,也充满了苹果4,但事实上每单位物理尺寸上的物理像素已经不同了。
物理分辨率可以不同,但是他们通过逻辑像素这个概念(pt),在显示结果上得到了统一。

DPI

如果明确了上面的这些概念,那么对于dpi的概念就手到擒来了,所谓dpi,是指每英寸上点的数目,这里的点自然是指pt了,于是很容易理解这样的现象:
在3gs上,使用20*20个像素来表示20*20个点,但是到了4上,使用40*40*个像素来表示这20*20个点,他们所用到的物理像素数量不同,但是表示点的数目是相同的,而dpi是指每英寸上具有点的数目,于是我们可以得到3gs和4的dpi是相同的,均为162dpi。

相关文章

  • 布局像素的辨析

    物理分辨率的概念 所谓物理分辨率,是指一块屏幕上,横向有多少个像素点,纵向有多少个像素点,比如苹果5的分辨率是64...

  • 自动布局相关

    没有自动布局,storyboard的布局是以像素计算的(绝对布局)

  • 像素和布局

    像素和布局 像素 设备像素:设备屏幕的物理像素。固定 css像素:web开发时书写在css中的像素。随缩放可变 视...

  • dpr是啥

    DPR也就是设备像素比 设备像素比(dpr) = 设备像素(分辨率)/设备独立像素(屏幕尺寸) 布局视窗:屏幕大...

  • H5页面的乱弹

    关于像素 布局使用的px是css像素,不指设备像素。 关于屏幕分辨率(设备像素) 设备分辨率和清晰度有关系。 关于...

  • APP查找图片资源时遵循先高后低原则(hdpi,mdpi,xhd

    1.图片布局 解压缩后的图片大小 = 图片的像素宽 * 图片的像素高 * 每个像素所占的字节数 运行上述代码,...

  • 页面布局方案

    页面布局 静态布局(Static Layout)使用CSS逻辑像素单位px进行定宽布局,是PC端最常见形式。 流式...

  • day01-移动web开发-适配方案(理论)

    流式布局: 就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,称为流式布局: viewport(视口)...

  • 响应式页面几大流派

    为了方便判断和描述,还需理解一些概念:设备像素,物理像素,设备逻辑像素。布局视口,视觉视口,理想视口。 简单来讲,...

  • 移动适配布局

    移动适配布局 1. 像素有关 1.1 设备像素(物理像素 ) 显示器的最小物理单位(对于一个显示器来说是固定的) ...

网友评论

      本文标题:布局像素的辨析

      本文链接:https://www.haomeiwen.com/subject/mwjzdttx.html