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

Question

我遇到了一个让我非常困惑的问题。但现在看来这一定是一个普遍的问题，我很惊讶我找不到其他问题。

基本上，我的网站上出现了图标。我希望它们在每台设备上都显示出大致相同的大小——大致是可触摸的大小。从旧的廉价 2.3 三星到新的高 2560x1440 高分辨率显示器，我希望这些图标的宽度约为 1.5 英寸。平板电脑、计算机等上的尺寸相似。

在不制作包含各种设备和屏幕尺寸的复杂表格的情况下，解决此问题的合理方法是什么？

Answer 1

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

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

Answer 2

如果媒体查询发生这种情况，您的 css 媒体查询可能会发生这种变化，那么您需要删除所有分辨率的可变大小。 并且您还需要以 px 为单位提供图标的大小。这将使您的图标大小在每台设备上都相同。