关于像素?

咱们说的分辨率,前端

好比浏览器

  1. iphone4的分辨率是 960 * 640 —这个是单位是点,标识设备屏幕上有多少显示单元,每一个显示单元,能够理解一个个物理的发光二极管
  2. iphone4的尺寸是3.5in,说的是物理的尺寸,对角线的长度,对应咱们常说的物理单位,cm,m这种。
  3. 思考一下,是否是个人分辨率越高,就显示的越清晰?

NO, 分辨率高未必清晰,我都见过那种很大led广告屏,分辨率高啊,几千几万,可是仍然能看到明显的颗粒度。iphone

在仔细一想,其实清晰不清晰,主要看的是单位密度(ppi)而不是设备总像素的多少。是否是单位密度越高,显示的细节越清晰啊。设计

  1. 有没有发现,全部的这些都是和具体的设备挂钩的。谈像素谈尺寸,都是离不开具体的设备。

可是有个问题,为啥又引入dp的概念,独立设备像素呢。ip

物理像素对应设备像素不是挺好?开发

好吗?rem

对于开发人员来讲,设备千千万。分辨率千差万别。总结

你想一下,若是一样3.5寸的屏幕上,我有个列表移动端页面

宽度都是100%,高度我设置 20样式

你会发现,分辨率高的屏幕上,高度特别小,宽度特别长。反却是
分辨率高的显示的不清晰(跟蚂蚁同样,密度过高,物理上看起来就小的很)

这可咋整啊。

设备厂商也郁闷了,草尼玛,老子辛辛苦苦提升分辨率,出力不讨好啊。

有啥办法,看起来物理上的高度和宽度都一致,可是更清晰的。

有没有什么办法解决啊!

因而你们一合计,你是ppi高吗?那我定义一个单位,

这就引出的独立设备像素,顾名思义,就是独立于设备的像素。

我就定义一个逻辑单位,dp

dp有多大呢,dp就有小指头的上方的一小块这么大(笑笑)。

大家呢都,尽可能往上靠,高的你就在设备层面转化物理像素的时候,放大一下。
低的呢,你就缩小一点。

这样看起来,你们是否是差很少大了。

对于开发人员来讲,只要设置的两个屏幕逻辑像素相同,它们的显示效果就是相同的。
是否是很爽。

你们一总结,发现把设备按照ppi分一下,大概是这么个比例:

ldpi [0.75倍]

mdpi [1倍]

hdpi [1.5倍]

xhdpi [2倍]

xxhdpi [3倍]

xxxhdpi [4倍]

不难发现,真正决定显示效果的,是逻辑像素尺寸(独立设备像素)。

有人问了,我一个前端懂这些有卵子用。

移动端页面的绝对单位就是px啊,我设置dp也不支持啊(草!!!为啥不支持dp?)

px和dp有啥关系?你想啊,浏览器也是设备上的应用,也是按照设备的缩放比缩放的。
具体能够对照一下, 缩放比:

1dp=1px(mdpi、iPhone 3gs)

1dp=1.5px(hdpi)

1dp=2px(xhdpi、iPhone 4s/5/6)

1dp=3px(xxhdpi、iPhone 6)

1dp=4px(xxxhdpi)

你再想一想,不支持dp也行啊,你不是不支持吗?

老子本身造,本身的轮船本身造(哈哈!笑)

既然我都知道缩放比了,老子本身换算一下不就ok了。

嗯,对了,就你最聪明!!

哈哈,因此就有了rem的解决方案。


ps: 如何和设计沟通?

单位决定了咱们的思考方式。

在设计和开发过程当中,应该尽可能使用逻辑像素尺寸来思考界面。

设计Android应用时,有的设计师喜欢把画布设为1080×1920,有的喜欢设成720×1280。

给出的界面元素尺寸就不统一了。

Android的最小点击区域尺寸是48x48dp,这就意味着在xhdpi的设备上,按钮尺寸至少是96x96px。

而在xxhdpi设备上,则是144x144px。

不管画布设成多大,咱们设计的是基准倍率的界面样式,并且开发人员须要的单位都是逻辑像素

因此为了保证准确高效的沟通,双方要以逻辑像素尺寸来描述和理解界面。

相关文章
相关标签/搜索