媒体查询：使用最小宽度的错误

Question

我正在使用以下代码，以便仅在大屏幕中显示某些元素：

.forkit, .forkit-curtain {
  display: none;
}

@media only screen and (min-width: 1400px) {
  .forkit, .forkit-curtain {
    display: block;
  }
}

但是当屏幕为1300px时，显示的元素仅在宽度为1250px时被隐藏，因此媒体查询min-width 1400px也适用于屏幕尺寸稍微低一点的坏行为。

我不知道为什么媒体查询的屏幕尺寸不好。发生了什么事？

由于

Answer 1

我怀疑差异不是50px，而是接近20px。更重要的是，我怀疑它对所有浏览器的反应都不一样。尝试比较Chrome和Firefox的断点。如果他们关闭大约20px，差异是因为：

IE，Firefox和Opera follow the W3C spec包括媒体查询中的滚动条宽度，而Webkit浏览器则没有。

因此，当您要求浏览器以1400px触发时，它将在大多数浏览器中触发大约1383px。

您目前无法强制浏览器对其进行相同的处理，因此最好的选择是修改布局，使其与媒体查询中的宽度不紧密相关（添加额外的边距）。有了这样的布局，当它在早期或晚期触发几个像素时，它就不会产生太大的差异。