如何使用dp计算阴影-web开发HTMLCSS

Question

我对在 Web 开发中使用 dp 有疑问。我目前正在阅读 google material design guidelines，他们正在谈论基于 dp 的高程和阴影。我如何在网络开发中使用它？有什么方法可以计算出如何根据 dp 创建阴影 HTML CSS?

网页示例：

凸起按钮

静止状态：2dp

按下状态：8dp

仅适用于桌面，凸起按钮的高度可以为：

静止状态：0dp

按下状态：2dp

Answer 1

如Google Material design documents所述：

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

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

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

并且屏幕密度是

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

所以这取决于屏幕的宽度和高度。网上有一些转换器可以计算每个密度。但由于大多数屏幕仍然是 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中写一个函数到return:

@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 和 y 或宽度和高度尺寸。 See design guide page on elevation.

如果您只是在寻找 CSS 阴影的值，请在此处查看。 https://github.com/mrmlnc/material-shadows/blob/master/material-shadows.scss

这与将 z 深度 dp 转换为 CSS 值一样接近。 CSS 值 do 与 Google 的聚合物元素相匹配，因此它很可能是正确的。

祝你好运！

如何使用dp计算阴影-web开发HTMLCSS

How to use dp to calculate shadows - web development HTML CSS

html

css

dpi

material-design