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

Question

我遇到了一个让我非常难过的问题。但现在看来这一定是一个普遍的问题，我很惊讶我找不到关于它的另一个问题。

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

什么是解决这个问题的合理方法，而不是例如制作一个包含各种设备和屏幕尺寸的复杂表格？

Answer 1

您应该使用绝对测量值(cm、pt、mm、in、pc)而不是相对值(px、em、%):

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