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

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

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

当我在不同的分辨率和像素密度下测试应用程序时，它看起来并不好，有时甚至不成比例，因此甚至无法正常工作。CSS没有像Android本机开发那样具有dp单元，但是我想知道有什么替代方法。

我能以某种方式使用Javascript获得像素密度并适当地手动缩放所有内容吗？制作外观和在所有分辨率/密度下都能正常工作的Web应用的最佳方法是什么？

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

我不同意目前接受的答案。正如uber5001所建议的，apx是固定单位，其精神类似于Android-specifc的工作dp。

每种材料的规格：

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

另外

在设计网页时，请将dp替换为px（用于像素）。

使用rem。

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

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

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

该rem单元是当场的，因为它说：“嘿，这是正常文本的大小。” 基于其他UI元素的大小，这是一个非常合理的选择。

在CSS3中，说网络上没有Android可能更准确px。CSS3的规范px说：

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

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

从CSS3开始，没有真正独立于设备的CSS单元。有关绝对长度，请参见W3C规范。特别是，绝对单位可能与它们的物理测量值不匹配。

如果物理单位符合其目的，则可以使用点之类的东西。点足够接近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);
}

基于rem单元的接口又如何呢？

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

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

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

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

（iPhone 6/7/8的宽度为375像素，将其更改为320像素（iPhone5），依此类推）

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

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

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

h5 { 
 font-size: 1.79904em;
 }

不完美地使用18/10：

h5 { 
 font-size: 1.8em;
 }

根据Google Chrome浏览器，您将获得18.0096px；