Units and measurements

Some units have different meanings in different contexts. This chapter discusses the usage of device-independent pixels, scaleable pixels, as well as concepts like pixel density.

在不情境下,单位有着不同的含义。这章主要是来讨论独立设备像素,可扩展像素的使用方法以及像素密度的概念

Pixel density

The number of pixels that fit into an inch is referred to as “pixel density.” High-density screens have more pixels per inch than low-density ones. As a result, UI elements (such as a button) appear physically larger on low-density screens and smaller on high-density screens.

每英寸所包含像素的个数被称为“像素密度”。高密度屏幕比低密度屏幕在单位英寸内包含更多的像素个数。这样一来,UI 元素(类似 button)在相同条件下,低密度屏幕比高度密度屏幕下占用更大的位置。

Screen resolution refers to the total number pixels in a display.

屏幕分辨率是指,显示屏上所有的像素个数。

screen density = screen width (or height) in pixels / screen width (or height) in inches

像素密度 = 屏幕宽度(高度)所包含的像素个数 / 屏幕宽度(高度)英寸

Related

相关阅读

Supporting Multiple Screens

More Resource Types

High-density screen

高密度屏幕

Low-density screen

低密度屏幕

Density-independent pixels (dp)

"Density independence" refers to the uniform display of UI elements on screens with different densities.

"Density independence" 是指 UI 元素在不同尺寸下,都能够显示出相同的效果。

Density-independent pixels (pronounced "dips") are flexible units that scale to uniform dimensions on any screen. When developing an Android application, use dp to display elements uniformly on screens with different densities.

Density-independent pixels (发音为 "dips") 是一个在不同尺寸下显示均匀的一种灵活单位。开发者在开发 Android 应用时,使用 dp 作为单位,表示在不同密度的屏幕能够显示均匀尺寸的元素。

A dp is equal to one physical pixel on a screen with a density of 160. To calculate dp:

1dp 等于像素密度为 160 的屏幕上的一个物理像素的宽度。计算 dp 的方法:

dp = (width in pixels * 160) / screen density

dp = (像素 * 160)/ 屏幕密度

When writing CSS, use px wherever dp or sp is stated. Dp only needs to be used in developing for Android.

在编写 CSS 时,应该将 dp 或者 sp 都转化成 px 进行使用。dp 只有用于开发 android 应用。

Screen density

Screen width in pixels

Screen width in density-independent pixels

120

180 px

240 dp

160

240 px

240

360 px

If you have three screens, all 1.5 inches wide, with varying screen densities, the screen width will still be 240dp for all of them.

假如你有这三个尺寸的屏幕,所有都是 1.5 英寸宽,但因为屏幕密度不同,但这三个屏幕宽度都可以是换算成 240dp。


Scaleable pixels (sp)

When developing for Android, scaleable pixels (sp) serve the same function as dp, but for fonts. The default value of an sp is the same as the default value for dp.

当开发 Android 时,scaleable pixels (sp) 提供与 dp 相同的功能,对于字体。sp 默认的值等于 dp。

The primary difference between an sp and a dp is that sp preserves a user's font settings. Users who have larger text settings for accessibility will see the font size matched to their text size preferences.

sp 与 dp 之间最主要的不同之处在于,sp 保留了用户的字体设置。谁拥有更大的可访问性文本设置,将会看到与他们设置相匹配的文字大小。(简而言之,对于android来说,字体用sp,剩下的用dp就可以了。)


Designing layouts for dp

When designing layouts for the screen, calculate an element’s measurements in dp:

在设计屏幕布局的时候,使用 dp 来计算元素的尺寸:

dp = (width in pixels * 160) / density

dp = (像素 * 160) / 屏幕密度

For example, a 32 * 32 px icon with a screen density of 320 equals 16 * 16 dp.

例如, 一个 32 * 32 px 尺寸的 icon 在屏幕密度为 320 的屏幕下,等于 16 * 16dp。


Image scaling

Images can be scaled to look the same across different screen resolutions by using these ratios:

图像可以通过以下比例进行缩放,使得在不同分辨率下有着相同的体验。

Screen resolution

dpi

Pixel ratio

Image size (pixels)

xxxhdpi

640

4.0

400 x 400

xxhdpi

480

3.0

300 x 300

xhdpi

320

2.0

200 x 200

hdpi

240

1.5

150 x 150

mdpi

160

1.0

100 x 100