4.2 布局-密度与分辨率

密度和分辨率

屏幕的像素密度和分辨率基于各平台会有所不同。

内容

像素密度

独立密度

Android像素密度

iOS像素密度

web像素密度

像素密度

一英寸内包含的像素数量称为像素密度。

屏幕密度变化

高密度屏每英寸所包含的像素数量比低密度屏多，因此像素规模相同的UI元素在低密度屏上显得较大，在高密度屏上显得较小。

计算像素密度

为计算屏幕密度，可以使用以下等式：

屏幕密度 = 屏幕像素宽度（或高度）/ 屏幕英寸宽度（或高度）

1. 高密度显示

2. 低密度显示

独立密度

独立密度是指不同密度屏上UI元素的统一显示。

独立密度像素*

独立密度像素，写作dp（发音为“dips”），是可以在任意屏幕上扩展成统一大小的灵活单位。它们为跨平台适配设计提供了灵活的方式。

*注：有些文献会称之为“逻辑像素”，与“物理像素”相对应。

Material UI利用独立密度像素使不同密度屏上的元素显示一致。

1. 低密度屏的独立密度显示

2. 高密度屏的独立密度显示

Android像素密度

开发Android应用程序时，不同密度的屏幕上统一使用dp来显示元素。

Dps和屏幕密度

1dp等于密度为160的屏幕上的一个物理像素。

dp计算方式：

dp = （宽度（像素） * 160） / 屏幕密度

可扩展像素（sp）

可扩展像素（sp）与独立密度像素（dp）的功能一致，只是针对的是字体。1sp的默认值与1dp默认值相同。

sp与dp的主要不同在于sp用于字体设置。有较大号可用字体设置的用户可以看到符合他们偏好的字体大小。

iOS像素密度

iOS使用逻辑分辨率来决定密度，度量单位为点（points，pt）。

逻辑分辨率

在逻辑分辨率中，点的扩展使用了原生扩展因数，可以映射到设备的原生分辨率（像素）。

例如，为iPhone X做设计时，应该使用的逻辑分辨率为 375 x 812 点（points）。渲染时，元素通过图形硬件处理来填充iPhone X的 1125 x 2436 实际像素屏。

iOS单位

请使用点（points）来为iOS做设计。

了解更多：

• 苹果iOS关于显示（Displays）的文件

• Paincode的iPhone分辨率指南

web像素密度

逻辑分辨率

使用设备的逻辑分辨率可以扩展成屏幕分辨率。

web上的单位

在web上设计时，使用px（像素）代替dp。

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考