css - 媒体查询：使用最小宽度时出错

Question

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

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

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

但是当屏幕为 1300px 时，元素会显示，并且仅在宽度为 1250px 时才会隐藏，因此媒体查询 min-width 1400px 也适用于屏幕尺寸稍低的情况，这是一种不好的行为。

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

谢谢

score 1 · Accepted Answer

我怀疑差异不是 50 像素，而是接近 20 像素。更重要的是，我怀疑它不会对所有浏览器做出相同的反应。尝试比较 Chrome 和 Firefox 的断点。如果它们偏离大约 20 像素，则差异是因为：

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

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

您目前不能强制浏览器对其进行相同处理，因此最好的选择是修改您的布局，使其与媒体查询中的宽度不紧密相关（添加额外的边距）。使用这样的布局，当它提前或延迟触发几个像素时，它不会产生太大的影响。

1 回答 1