CSS / HTML：为多 DPI 设备设计像素？保持相同的大小？答案

【问题标题】：CSS / HTML : Designing with pixels for multi DPI devices? Retaining same size?CSS / HTML：为多 DPI 设备设计像素？保持相同的大小？
【发布时间】：2016-07-17 22:25:07
【问题描述】：

我开始设计一个应该代表移动标题的 div。我使用像素高度设计它，问题是这在其他手机上看起来不同。我认为这是像素不是 DPI 的问题。

在 android 世界中，这很容易解决。我使用的是标准 HTML 网站，我使用的是带有 scss (sass) 的引导网格。

有没有办法让高度在每个具有不同 DPI 比率的设备上保持精确高度？

真的迷路了，我想这个问题有解决办法吧？

我认为这个问题对于像素和图像也将是相同的，在某些设备上，它会在不同设备 DPI 之间占用不同数量的空间。这里的解决方案是什么？

【问题讨论】：

标签： css html mobile sass

【解决方案1】：

使用em代替像素，em是相对于设备标准字体大小

【讨论】：

你能详细说明一下吗？所以如果我有一个 100 x 100 像素的图像，我应该使用什么 em？有没有一些标准尺寸计算器？
将所需的字体大小（以像素为单位）除以标准字体大小，因此对于 google chrome 浏览器，标准为 16px，即为 100 / 16 = 6.25em。 iPhone 上的 Safari 浏览器有 12px 标准，所以如果你使用 6.25 em，图像会自动缩放到 75px。