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

我认为这可能是一个菜鸟问题，但这确实使我感到困惑。

我正在阅读Google Material Design的文档及其在CSS中的一些实现。该规范是用Android编写的dp，而CSS代码则px用作长度单位。

令我感到困惑的是，css实现经常使用规范中的确切值，例如，吐司应该具有：

单行小吃吧高度：48 dp高

最小宽度：288 dp

2 dp圆角

对应的CSS：

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

根据我目前的理解，Android DP通常在160dpi屏幕上以一个像素的大小显示，而CSS px被定义为视角。那么在远处看到时px碰巧是否与相同dp？如果是这样，这是一个共同的模式使用px如dp在CSS中，还是我完全误解了CSS代码？

我以前对Android开发一无所知，但对设计师一无所知。谢谢你的帮助。

我认为接受是错误的。css px实际上是与设备无关的像素（dip），在css中使用px作为dp是一种常见的模式。

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

/programming/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;

因此，这是一对一的转换，从中我们得知Android浏览器使用了：

1 css-px = 1 dp

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

结论：css像素独立于设备dpi，在Android设备上1 css-px等于1dp。

没有一个正确的答案，实际上有两个：

1. Google推荐（例如，在有关材料设计的Udacity课程中）：使用简单的转换，在许多情况下，就像在Polymer库中一样，该转换为1：1。例如，对于视网膜显示而言，这是不正确的，因此，请使用官方材料设计指南中设备表中提供的密度比（而不是1：1）（具有某些流行设备的比率和特定指标的表），并提供适当的@media查询分辨率阈值和资产，假设1dpi对于mdpi显示（160dpi / ppi）等于1px。

注意：总体思路：在页面底部：使用某些图片缩放图像以可视化多个屏幕分辨率阈值的比率（断点图片）

2. 如果您想在整个设计中为特定设备提供超一致性，则必须进行更多的研究和计算，更重要的是，需要进行更多的@media查询，以支持所需的任意数量的设备并提供后备功能（对于您不太在意的方法，请参见第1位提到的方法）。

对于那些想深入了解该主题的人，这里提供了更详细的信息，但这是后面的解释和逻辑，以上是一个完整的答案：

根据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像素宽度= ca。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毫米）。该距离要短得多，因此该应用程序对用户显得更加敏感。

早先提到的聚合物转化率1：1可能是由于这样的事实，即96dpi的密度，甚至我给出的密度都处于低密度的某个位置，甚至低于（甚至在96dpi的情况下）组。考虑到dp值不被css接受，因此更容易假设密度比（对于低密度为0.75，对于中等密度为1,0，以此类推）是应该用于简化和倍数尺寸的密度比屏幕支持，这在前面提到的“材料设计”的设备表中显示。在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的区域，需要更多的设备像素（点）。在低分辨率上，这意味着您必须为Material Design和所有移动设备提供相同的内容（但具有更多的阈值），这实际上是在CSS查询中广泛使用的视网膜显示。

最后，请使用Google最佳建议的MD密度比，或者使用精确度，或者您的设计需要物理尺寸绝对一致：使用特定或通用的ppi / dpi值进行精确转换设备（非常疯狂），您可以在Google resizer在线工具上轻松对其进行测试，因为它们首先遵循了《医学指南》中建议的通用阈值以及比率和相关显示类型名称（xlarge，medium等）的划分规则）实施。

因此，请牢记表格中的MD比率，并记住参考dp等于像素大小适用于mdpi分辨率（160），这样您会很好。