Material Design基础 - Pixel Density

1. 像素密度(Pixel Density)

一英寸屏幕上存在的像素数称为像素密度。

屏幕像素密度和分辨率因平台而异。

1.1. 屏幕密度变化

高密度屏幕的每英寸像素数比低密度屏幕的多。因此,相同像素尺寸的UI元素在低密度屏幕上显示得更大,而在高密度屏幕上显示得更小。

1.2. 屏幕密度(screen density)

要计算屏幕密度,可以使用以下等式:
屏幕密度=以像素为单位的屏幕宽度(或高度)/以英寸为单位的屏幕宽度(或高度)

1.3. 密度无关性(Density independence)

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

1.4. 密度无关的像素(Density-independent pixels)

密度无关的像素,写为dp(发音为“dips”),是一种灵活的单元,可以在任何屏幕上缩放以获得统一的尺寸。它们提供了一种灵活的方式来适应跨平台的设计。
Material UI使用与密度无关的像素在不同密度的屏幕上一致地显示元素。

1.5. Android上的像素密度

开发Android应用程序时,使用dp在不同密度的屏幕上均匀显示元素。

1.5.1. Dps和屏幕密度

1dp等于屏幕密度为160的一个物理像素。
要计算dp:
dp=(像素宽度*160)/屏幕密度

Screen physical widthScreen densityScreen width in pixelsScreen width in dps
1.5 in120180px240dp
1.5 in160240px240dp
1.5 in240360px240dp

1.5.2. 可缩放像素(Scalable pixels (sp))

可缩放像素(sp)的功能与密度无关像素(dp)相同,但用于字体。sp的默认值与dp的默认值相同。
sp和dp之间的主要区别在于sp保留用户的字体设置。具有更大的无障碍文本设置的用户将看到字体大小与其文本大小首选项匹配。

1.6. ios上的像素密度

iOS使用逻辑分辨率确定密度,该分辨率以点为单位测量密度。

1.6.1. 逻辑分辨率 (Logical resolution)

对于逻辑分辨率,使用本机比例因子缩放点,该因子映射到设备的本机分辨率(以像素为单位)。
例如,在为iPhone X设计时,您将设计375 X 812点的逻辑分辨率。渲染时,图形硬件会对元素进行处理,以填充iPhone X的1125 X 2436像素屏幕。

1.6.2. iOS的单位

为iOS设计时,使用点(pts)
了解更多信息:
苹果iOS在显示器上的文档
PaintCode的iPhone分辨率指南

1.7. web上的像素密度

1.7.1. 逻辑分辨率

使用设备的逻辑分辨率,该分辨率与设备的屏幕分辨率成比例。

1.7.2. web单位

在为web设计时,将dp替换为px(像素)

2. Material Design 系列文章

最新更新以及更多Material Design相关文章请访问 鹏叔的技术博客-Material Design

3. 参考文档

Material System - layout pixel density

Material Design基础 - Pixel Density

https://pengtech.net/material/pixel_density.html

作者

鹏叔

发布于

2022-04-30

更新于

2024-08-06

许可协议

评论