没有一个正确的答案,实际上有两个:
- 谷歌推荐(例如在 Udacity 的 Material Design 课程中):使用简单的转换,在很多情况下是 1:1,就像在 Polymer 库中一样。例如,它不适用于视网膜显示,因此不要使用 1:1,而是使用官方 Material Design Guide 中的设备表中提供的密度比(包含一些流行设备的比率和特定指标的表)并提供合适的 @media 查询分辨率阈值和资产,假设 1dp 等于 1px 用于 mdpi 显示 (160dpi/ppi)。
注:整体思路:在页面底部:图像缩放与一些图片可视化多个屏幕分辨率阈值的比率(断点图片)
- 如果您希望在特定设备的设计中实现超一致性,您必须进行更多的研究和计算,更重要的是一堆更多的@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),你会很好。