如何在不同设备的范围内制作相同/相似物理尺寸的图标？

Question

我遇到了一个让我真的难过的问题。但现在看来它一定是个常见问题，我很惊讶我无法找到另一个问题。

基本上，我的网站上有图标。我希望它们在每个设备上看起来大小相同 - 大致可触摸的尺寸。从旧的廉价2.3三星到新的高2560x1440高分辨率显示器，我希望这些图标大约是1.5＆＃34;跨越。平板电脑，计算机等的尺寸相似。

如果没有制作一系列设备和屏幕尺寸的复杂表格，那么解决这个问题的合理方法是什么？

Answer 1

您应该使用绝对测量值（cm，pt，mm，in，pc）而不是相对值（px，em，％）：

.my-image
{
    width: 1.5in;
    height: 1.5in;
}

Answer 2

如果媒体查询发生这种情况，那么您的css媒体查询会发生此更改，那么您需要删除所有分辨率的变量大小。 而且你需要在px中给出你的图标大小。这将使你的图标＆＃39;尺寸与每台设备相同。