什么是 CSS 的 dp（与密度无关的像素）单位？答案

【问题标题】：What's dp (density independent pixels) units with CSS?什么是 CSS 的 dp（与密度无关的像素）单位？
【发布时间】：2013-04-29 17:41:34
【问题描述】：

对于 Android，人们建议对 UI 元素使用 dp（与密度无关的像素）测量值，并且存在一些约定，例如使用 48dp 作为按钮高度等。

我正在开发一个 Web 应用程序，我收到很多关于 UI 设计的批评，说它不符合 Android 设计标准。显然，我的应用程序看起来会有所不同，因为它使用的是 CSS 和 HTML，而不是 Android Holo 主题，但我仍然想让它尽可能地符合要求。然而 CSS 不允许密度独立测量。

当我在不同的分辨率和像素密度上测试我的应用程序时，它看起来并不好，有时，它不成比例，甚至无法正常工作。 CSS 没有像 Android 原生开发那样的 dp 单位，但我想知道有哪些替代方案。

我能否以某种方式使用 Javascript 获得像素密度并适当地手动缩放所有内容？制作一个在所有分辨率/密度下外观和工作都很好的网络应用程序的最佳方法是什么？

【问题讨论】：

CSS 的 px 与 Android 上的 dp 相同。 According to the CSS3 spec. on units and values.

标签： android css web-applications user-interface screen

【解决方案1】：

我不同意当前接受的答案。正如 uber5001 所暗示的，px 是一个固定单元，与 Android 专用的 dp 的努力精神相似。

每Material's spec:

在编写 CSS 时，在指定 dp 或 sp 的地方使用 px。 dp只需要用于Android开发即可。

另外

为网页设计时，将 dp 替换为 px（代表像素）。

【讨论】：

这是答案。 +1 引用材料规范。
来自 MDN：“in 中的单位不代表屏幕上的物理英寸，而是代表 96px。这意味着无论实际屏幕像素密度是多少，都假定为 96dpi。在具有更大的像素密度，1in 将小于 1 物理英寸。同样，mm、cm 和 pt 不是绝对长度。 developer.mozilla.org/en/docs/Web/CSS/…
CSS 英寸和物理英寸是两个不同的东西。 1 CSS 英寸始终为 96px，与屏幕密度无关。所以只有在 96 dpi 的显示器上，CSS 英寸和物理英寸才能被认为是相等的。
@MaciejKrawczyk 我理解你关于 px 规模差异的争论的基础。我可以争论 px 如何确实是一个固定单位，而你所涉及的规模并没有改变这个基本事实，但这是一个转移注意力的问题。现实情况是 Material 规范直接声明在建议 dp 的地方使用 px 。鉴于 Brad 询问了 Android 设计标准，我提供了规范且因此正确的答案。
最近的材料设计更新（2018 年 5 月）更深入地解释了像素密度material.io/design/layout/#pixel-density

【解决方案2】：

http://www.w3.org/TR/css3-values/#lengths

CSS 中最接近的单位是视口百分比单位。

vw - 等于初始包含块宽度的 1%。
vh - 等于初始包含块高度的 1%。
vmin - 等于 vw 或 vh 中的较小者。
vmax - 等于 vw 或 vh 中的较大者。

需要注意的唯一不支持这些单元的移动浏览器是 Opera。 http://caniuse.com/#feat=viewport-units

【讨论】：

在 iOS 中部署时这些单元是否正确显示？
@jmhostalet 不，它会导致浏览器进入一种无限循环，因为视口高度是动态的。
这个答案是不正确的，因为 css 中的 px 单位（与直觉相反）实际上已经独立于像素密度——“css 像素不是像素”，有很多文章关于这个

【解决方案3】：

使用rem。

它是根元素的字体大小，是其他 UI 元素大小的一个很好的基本单位。

如果使用相同的绝对大小（以厘米为单位），则文本和其他元素在移动设备上会太大或在桌面上太小。

如果使用相同数量的像素，文本和其他元素在移动设备上会太小，在桌面设备上会太大。

rem 单元在现场，因为它说“嘿，这是正常文本应该有多大。”以此为基础的其他 UI 元素的大小是一个非常合理的选择。

【讨论】：

【解决方案4】：

在 CSS3 中，说网络没有 Android 的 px 可能更准确。 The spec for CSS3's px 说：

像素； 1px 等于 1in 的 1/96

px 可能是您未来想要的度量。

【讨论】：

在不破坏一切的情况下，我看不出这种转变将如何发生。例如，对于移动设备和桌面设备上的文本使用相同的绝对大小（以厘米为单位）并不是一个好的范例。
而 1in 被定义为 96px 。像 in、mm 这样的 CSS 单位取决于像素密度。
yo siempre use px en vez de dp y va bien
大吃一惊：OOOO

【解决方案5】：

从 CSS3 开始，没有真正独立于设备的 CSS 单元。请参阅W3C spec on absolute lengths。特别是，绝对单位可能与其物理测量不匹配。来自规范：

注意：如果锚单位是像素单位，则物理单位可能与其物理测量值不匹配。或者，如果锚单元是物理单元，则像素单元可能不会映射到整数个设备像素。

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

如果物理单位是真实的，你可以使用点之类的东西；点数与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);
}

【讨论】：

【解决方案6】：

基于 rem 单位的界面呢？

我在这件事上没有足够的经验来确认，但我认为您可以根据视口大小进行一些数学运算，以在根元素中应用字体大小，并且整个界面会相应地进行调整。这东西对我来说有点巫术。

【讨论】：

您不需要设置字体大小。根元素的默认字体大小对于手头的设备来说通常是一个相当合理的选择。

【解决方案7】：

为什么不使用点，它是跨设备的一致大小。并且是相对于屏幕大小的。大多数人不熟悉它，因为它来自传统出版。

【讨论】：

【解决方案8】：

在 vw（任何设备的屏幕宽度）和 em 之间使用一些混合会怎么样？这里的字体大小是动态变化的，具体取决于您的设备屏幕宽度。在你的主 CSS 文件中使用下一条规则：

font-size: calc(100vw * 10 / 375);

（iPhone 6/7/8 的宽度为 375px，更改为 320px (iPhone5) 等）

在所有情况下，它都能完美运行。只有一个减号。如果您的目标是“像素完美”，那么您需要在点后使用大数字。

示例：您的目标是字体大小为 h5: 18px 在所有屏幕上。

那么你的完美“em”将是：

h5 { 
 font-size: 1.79904em;
 }

没有完美使用 18 / 10：

h5 { 
 font-size: 1.8em;
 }

根据谷歌浏览器你得到 18.0096px;

【讨论】：