Question

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

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

当我在不同分辨率和像素密度下测试我的应用程序时，它看起来不太好，有时，它是不成比例的，所以它甚至不起作用。 CSS没有像Android原生开发那样的dp单元，但我想知道一些替代品是什么。

我能以某种方式使用Javascript获取像素密度并手动缩放所有内容吗？制作一个在所有分辨率/密度上都能很好地运行的Web应用程序的最佳方法是什么？

Answer 1

我不同意目前接受的答案。正如uber5001建议的那样，px是一个固定的单位，与Android特有的dp的努力类似。

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

此外

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

Answer 2

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

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

Answer 3

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

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

px可能是您将来想要的衡量标准。

Answer 4

使用rem。

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

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

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

rem单位就位，因为它说“嘿，这是正常文本的大小。”在此基础上设置其他UI元素的大小是一个非常合理的选择。

Answer 5

从CSS3开始，没有真正与设备无关的CSS单元。请参阅W3C spec on 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 6

基于rem单位的界面怎么样？

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

Answer 7

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

Answer 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;
 }

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