Web 中具有相同尺寸但不同分辨率的两个屏幕

Question

我正在尝试创建响应式 header 并且我应用了如下样式，

@media (min-width: 1300px) and (max-width: 1400px) {
 .headerText {
    left: 40%;
 }
}

当我在两台具有相同分辨率 (1366*768) 且显示器尺寸不同的 15" 和 19" 机器上进行测试时，它显示了不同的视图。

那么有什么方法可以让我为不同尺寸的显示器应用不同的 css 或者什么是最好的解决方案？

注意：社区中也有同样的问题，但主要针对 anriod。

Answer 1

在头部添加了视口。

<meta name="viewport" content="width=device-width, initial-scale=1">