105

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

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

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

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

4

8 回答 8

204

我不同意目前接受的答案。正如 uber5001 所暗示的，apx是一个固定的单位，与 Android-specific 的努力类似dp。

根据材料的规格：

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

此外

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

于 2015-07-30T04:51:45.243 回答
25

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

于 2013-05-06T01:46:37.123 回答
22

使用rem.

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

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

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

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

于 2015-10-09T01:50:59.410 回答
19

在 CSS3 中，说网络没有 Android 的px. CSS3 的规范是px这样说的：

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

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

于 2015-02-17T05:22:18.890 回答
13

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

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

注意：此像素单位和物理单位的定义与以前版本的 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);
}
于 2016-12-13T17:09:19.270 回答
10

那么基于 rem 单位的界面呢？

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

于 2014-07-24T15:56:41.120 回答
1

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

于 2015-10-24T17:38:37.060 回答
0

在 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；

于 2019-11-21T16:01:14.557 回答