如何在 Android DP 和 CSS px 之间转换?

平面设计 css 安卓
2022-01-02 14:49:28

我看到这可能是一个菜鸟问题,但它确实让我感到困惑。

我正在阅读来自 Google Material Design 的文档,以及它在 css 中的一些实现。规范是用 Android 编写的dp,而 css 代码px用作长度单位。

让我感到困惑的是,css 实现通常使用规范中的确切值,例如,toast应该有

单行小吃店高度:48 dp 高

最小宽度:288 dp

2 dp 圆角

相应的 CSS

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

以我目前的理解,AndroidDP一般在160dpi的屏幕上显示为一个像素的大小,而CSSpx定义为一个视角。那么在远处看时a是否px恰好与a相同?如果是这样,这是在 cssdp中使用的常见模式,还是我完全误解了 CSS 代码?pxdp

我以前对Android开发一无所知,也不是设计师。谢谢你的帮助。

4个回答

我认为接受是错误的。css px实际上是Device Independent Pixel(dip),在css中使用px作为dp是一种常见的模式。

我相信您的问题的完整答案可以在这里找到:

https://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-in-android

要将 dp 转换为 px,您需要考虑要寻址的显示尺寸。DPI 越大,您必须在同一区域填充越多的像素才能使其看起来不错并避免像素化

ldpi: 1 dp = 0.75 px
mdpi: 1 dp = 1 px
hdpi: 1 dp = 1.5 px
xhdpi: 1 dp = 2 px
xxhdpi: 1 dp = 3 px
xxxhdpi: 1 dp = 4 px

例如:

CSS 或 Photoshop 中的 3x3 dp 正方形需要:

2.25x2.25 px - ldpi
3x3 px - mdpi (Samsung ACE, Xperia X8)
6x6 px - xhdpi (Xperia S, Google Nexus 4)
9x9 px - xxhdpi (Samsung S4 - S5, HTC One)
12x12 px - xxxhdpi (这个解决方案将用于下一代设备)

基于以上内容,您的计算应该如下所示,对 XXHDPI 屏幕使用 3x dp 乘数:

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

如果 Android 发现使用的设备分辨率较低,它会自动缩小图像,因此您可以放心地使用 XXHDPI 进行开发,因为它适用于当今市场上的大多数高端设备。

这是一个简单的转换器来为您完成这项工作:http ://androidpixels.net/

W3C 说

因此,px 单位使您不必知道设备的分辨率。无论输出是 96 dpi、100 dpi、220 dpi 还是 1800 dpi,以 px 整数表示的长度在所有设备上总是看起来不错并且非常相似 (...)

尽管它说:

要了解 px 的外观,请想象一下 1990 年代的 CRT 计算机显示器:它可以显示的最小点约为 1/100 英寸(0.25 毫米)或更多。px 单位得名于这些屏幕像素。

它还说:

事实上,CSS 要求 1px 在所有打印输出中必须恰好是 1/96 英寸 (...)

考虑到默认屏幕设备配置为 96dpi,这是浏览器如何解释 CSS 像素的最佳假设:

96 css-px = ~ 1 inch

我们知道在 Android 中:

160 dp = ~ 1 inch

所以:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

并据此:

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

好吧,我认为这是正确的,直到我检查了Google Polymer 的 Toast尺寸:

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

所以这是一个 1 对 1 的转换,从中我们得到了 Android 浏览器使用:

1 css-px = 1 dp

每英寸 96 css-px 用于台式机和笔记本电脑等其他设备。

总结:css 像素独立于设备 dpi,在 Android 设备上,1 css-px 等于 1dp。

没有一个正确的答案,实际上有两个:

  1. 谷歌推荐(例如在 Udacity 的 Material Design 课程中):使用简单的转换,在很多情况下是 1:1,就像在 Polymer 库中一样。例如,它不适用于视网膜显示,因此不要使用 1:1,而是使用官方 Material Design Guide 中的设备表中提供的密度比包含一些流行设备的比率和特定指标的表提供合适的 @media 查询分辨率阈值和资产,假设 1dp 等于 1px 用于 mdpi 显示 (160dpi/ppi)

注:整体思路:在页面底部:图像缩放一些图片可视化多个屏幕分辨率阈值的比率(断点图片)

  1. 如果您希望在特定设备的设计中实现超一致性,您必须进行更多的研究和计算,更重要的是一堆更多的@media 查询,以便支持尽可能多的设备并提供回退(使用第一个地方提到的方法)对于那些你不太关心的人。

这里有更详细的信息供那些想更深入探讨这个话题的人使用,但这是一个解释和逻辑,上面是一个完整的答案

问题是,根据 Material Design 的官方指南(布局>单位和测量),“像素密度”是:

适合一英寸的像素数。

所以基本上像素密度是 ppi 值的新名称,或者因为很多人不认为这是一个单独的东西,一个 dpi 值。

根据同一指南定义 1dp:

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

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

编写 CSS 时,在指定 dp 或 sp 的地方使用 px。dp只需要在Android开发中使用。

Material design 的核心原则是在不同平台上保持一致的物理尺寸,这引发了桌面分辨率、ppi(/dpi) 和 css 像素的问题,在这种情况下你应该坚持计算 dp,就像在 Android 的情况下一样设备,而且大多数屏幕不是 96ppi(这是一个对 CSS 很重要的假设),其中很大一部分具有更高的 ppi,如果您不仅考虑到传统台式机,还考虑到普通笔记本电脑,或者平板电脑,或者像 Surface 这样的“敞篷车”,需要进行转换:它们通常在 100-130ppi 的范围内,也就是说我目前使用的是 127ppi:

100% = 160ppi -> 物理 1 像素宽度 = 1dp ->矩形 100x100px = 100x100dp

79% = 127ppi -> 物理 1 像素宽度 =大约。0,8dp ->矩形 100x100px = 80x80dp

虽然 dp 是一个纯新的 Android 单元,但您应该进行一些计算以适应 dp 中的 MD 布局。如果您想进一步了解特定元素在物理意义上有多大,对问题的目的最有用的是特定设备的材料设计指南中的理想触摸尺寸范围值**在 dp 值下方有一个物理的。**dp值改变,但物理保持不变。

这个问题,为什么你需要计算单位,在 Android API 指南(将 dp 单位转换为像素单位)中有进一步的解释,它仍然适用于使用 CSS 样式的元素:

在某些情况下,您需要以 dp 表示尺寸,然后将它们 > 转换为像素。

想象一个应用程序,其中在用户的手指移动了至少 16 个像素后识别出滚动或滑动手势。在基线屏幕上,用户必须移动 16 像素/160 dpi,这等于 1/10 英寸(或 2.5 毫米)才能识别手势。在具有高密度显示器 (240dpi) 的设备上,用户必须移动 16 像素/240 dpi,这等于 1/15 英寸(或 1.7 毫米)。距离要短得多,因此应用程序对用户来说显得更敏感。

前面提到的 Polymer 转换 1:1 可能是因为 96dpi 的密度,甚至我给出的密度都处于低密度甚至(如 96dpi 的情况)组,甚至低于它。考虑到 dp 值不是 css 接受的,更容易假设密度比(0,75- 表示低,1,0 中等,等等)是应该用于简化和多尺寸的那个屏幕支持,如前面提到的 Material Design 的设备表中所示。它甚至在 Android API 指南的上述章节中被提及为最佳实践之一。这就是聚合物转换 1:1 可能好的地方,因为许多设备的密度比都在 1 级。

回到最后一个难题:css px,如果您决定深入研究不同设备的细微差别。如果您不是那么好奇,请坚持使用 MD 表中的密度比。但是如果你是一个完美主义者,这个 CSS 像素和物理尺寸关系的症结在W3C 候选人推荐中有一个完美(而且非常简单的解释) :

绝对长度单位相对于彼此是固定的,并且锚定到一些物理测量它们主要在输出环境已知时有用。绝对单位由物理单位('in'、'cm'、'mm'、'pt'、'pc'、'q')和视角单位('px')组成:

对于在手臂长度上阅读,1px 因此对应于大约 0.26 毫米(1/96 英寸)。

注意:请注意,此像素单位和物理单位的定义与以前版本的 CSS 不同。特别是,在以前的 CSS 版本中,像素单位和物理单位并没有按固定比率相关:物理单位总是与它们的物理测量相关联,而像素单位会变化以最接近参考像素。(进行此更改是因为太多现有内容依赖于 96dpi 的假设,而打破该假设会破坏内容。)

这个新的 px 定义(考虑到物理尺寸)填补了 CSS 像素和 dps 之间的空白,让我们通过使用简单的测量计算确保所谓的输出环境,在这种情况下是一致的(在物理意义上) MD 布局,在不同的设备和平台上保持不变。此外,W3C 和 MD 指南都使用低分辨率和高分辨率设备图片来说明像素/点覆盖的核心思想——在高分辨率设备上覆盖 1px x 1px 区域需要更多的设备像素(点)。在低分辨率上,这意味着在用于视网膜显示的 CSS 查询中广泛使用的内容确实与您必须为 Material Design 和所有移动设备提供(但具有更多阈值)相同的东西。

最后,要么使用谷歌最佳推荐实践的 MD 密度比,或者如果您专注于精度或您的设计需要在物理尺寸方面绝对一致:使用特定或常见的 ppi/dpi 值进行精确转换设备(这非常疯狂),您可以在 Google resizer 在线工具上轻松测试,因为它们首先尊重 MD 指南中建议的通用阈值以及比率和相关显示类型名称(xlarge、medium 等)的划分规则) 在其中实现。

所以坚持使用表中的 MD 比率,记住参考 dp 等于像素大小适用于 mdpi 分辨率(160),你会很好。