Question

我对在web开发中使用dp有疑问。我正在阅读google material design guidelines，他们正在谈论基于dp的高程和阴影。我如何在Web开发中使用它？有没有办法计算这个如何使用HTML CSS创建基于dp的阴影？

网页示例：

凸起按钮

休息状态：2dp

按下状态：8dp

仅对于桌面，凸起的按钮可以具有以下高度：

休息状态：0dp

按下状态：2dp

Answer 1

dp等于屏幕上的一个物理像素，密度为160。   要计算dp：

dp =（宽度，以像素为单位* 160）/屏幕密度

编写CSS时，请在说明dp或sp的地方使用px。 Dp只需要   用于开发Android。

和屏幕密度是

屏幕分辨率是指显示屏中的像素总数。

屏幕密度=屏幕宽度（或高度），以像素/屏幕宽度（或   身高）英寸

所以这取决于屏幕的宽度和高度。网上有一些转换器可以计算每种密度。但由于大多数屏幕仍为72dpi（未提及HDPI屏幕），我认为这是一个合适的起点。

Answer 2

没有真正与设备无关的CSS单元。见http://www.w3.org/TR/css3-values/#absolute-lengths。特别是，绝对单位可能与其物理测量值不匹配。

如果物理单位符合他们的目的，你可以使用点数;积分足够接近dps：

1 in = 72 pt
1 in = 160 dp
=> 1 dp = 72 / 160 pt

如果你使用SCSS，你可以编写一个函数来返回pts：

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

并使用它：

.shadow-2 {
  height: dp(2);
}

Answer 3

对于Material的阴影，他们只使用dp的概念来尝试传递元素应该如何分层。

即

2dp < 8dp // 2 is layered under 8
// or
2dp (resting) => 8dp (focused)

他们所指的是 z-depth （或在z轴上）。这不能直接转换为CSS。 当他们谈论提升水平时，他们并不是指x＆amp; y或宽度＆amp;身高维度。 See design guide page on elevation.

接近将z-depth dp转换为CSS值。 CSS值做与Google的Polymer元素匹配，但最有可能出现在其中。

祝你好运！