媒体查询：使用最小宽度时出错答案

【问题标题】：Media Query: error using min-width媒体查询：使用最小宽度时出错
【发布时间】：2013-02-04 01:55:05
【问题描述】：

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

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

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

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

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

谢谢

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：