Css 为什么媒体查询在不同的网站上以相同的分辨率显示不同的外观

当我在1366 x 768的资源中编写媒体查询和测试它时，我遇到了一些视觉上的差异，我使用的是另一台分辨率设置为1366 x 768的显示器，我还检查了另外两台“测试您的网站响应性”显示器试着将其中两个与我的另一个显示器进行比较，它们看起来都不一样

我使用的媒体查询是

@media screen and (max-height: 768px){
    #AttachMods.on-dock {
        width: 265px !important;
    }

    #AttachMods.on-dock #treelist {
        height: 100px !important;
    }

    #AttachMods.on-dock #TreeSelectItems {
        height: 100px !important;
    }

    #AttachMods.on-dock #ImagePath {
        height: 122px !important;
    }
}

下面是我设置为1366x768的显示器的外观

以下是我的笔记本电脑1920x1080的外观，但使用的是网站响应测试仪，设置为1366x768

这是一个不同的测试，使用另一个响应测试仪设置为1366x768

---

我的问题是，为什么会这样，而且没有一堆不同的设备，哪一个是媒体查询的真实代表？

我认为这与

px

vs

ems

有关。我脑子里没有关于这个问题的讨论链接，但这是值得研究的