css - 媒体查询 : error using min-width

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。更重要的是，我怀疑它对所有浏览器的 react 都不一样。尝试比较 Chrome 和 Firefox 的断点。如果它们偏离约 20 像素，则差异是因为:

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

因此，当您要求浏览器在 1400 像素处触发时，在大多数浏览器中它会在大约 1383 像素处触发。

目前您不能强制浏览器以同样的方式对待它，因此最好的选择是修改您的布局，使其与媒体查询中的宽度不那么紧密相关(添加额外的边距)。使用这样的布局，当它提前或延迟触发几个像素时，不会产生太大的差异。