奇怪的 CSS 媒体查询逻辑

Question

我正在做一个项目，但遇到了问题。 我将通过以下演示示例向您展示：

这是css代码：

    *, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    border: 0;
}

@media only screen and (max-width: 600px) {
    div {
        background: blue;
    }
}


@media only screen and (min-width: 601px) and (max-width: 1000px)  {
    div {
        background: green;
    }
}


@media only screen and (min-width: 1001px) {
    div {
        background: red;
    }
}

所以我的 div 应该是：

• 从 0px 到 600px 的蓝色
• 从 601 像素到 1000 像素的绿色
• 红色从 1001px 到 ...

而是：

• 从 0px 到 600px 的蓝色
• 601 像素的白色
• 从 602 像素到 1000 像素的绿色
• 1001 像素的白色
• 红色从 1002px 到 ...

为什么？看来(min-width:) 不包括在内。

所以我尝试了：

    *, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    border: 0;
}

@media only screen and (max-width: 600px) {
    div {
        background: blue;
    }
}


@media only screen and (min-width: 600px) and (max-width: 1000px)  {
    div {
        background: green;
    }
}


@media only screen and (min-width: 1000px) {
    div {
        background: red;
    }
}

所以我的 div 应该是：

• 从 0px 到 600px 的蓝色
• 从 601 像素到 1000 像素的绿色
• 红色从 1001px 到 ...

而是：

• 蓝色从 0px 到 599px
• 从 600 像素到 999 像素的绿色
• 红色从 1000px 到 ...

为什么？现在看来(min-width:) 是包容性的。

但如果我尝试：

    *, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    border: 0;
}

@media only screen and (max-width: 601px) {
    div {
        background: blue;
    }
}


@media only screen and (min-width: 601px) and (max-width: 1001px)  {
    div {
        background: green;
    }
}


@media only screen and (min-width: 1001px) {
    div {
        background: red;
    }
}

好像(min-width:)又不包容了：

• 蓝色从 0px 到 601px
• 从 602px 到 1001px 的绿色
• 红色从 1002px 到 ...

我很困惑。

Answer 1

'min' 和 'max' 前缀都包含在内。引用the spec:

大多数媒体功能都接受可选的“min-”或“max-”前缀 表达“大于或等于”和“小于或等于”的约束。

问题有点不同：虽然您希望像素尺寸是整数，但并不总是这样。 This article 非常详细地描述了这个问题：

您可能会想“半个像素？这是不可能的”，而且大多数情况下 部分不是。但是如果你使用 Ctrl+ 或 Ctrl- 来改变你的浏览器 zoom 那么你通常会得到非整数视口大小，并且 工作时浏览器可以使用非整数视口大小 找出要应用于页面的媒体查询 [...]

在 Windows 7 及更高版本中，操作系统使用了缩放级别 文本和图标之类的系统，以及更大的屏幕（1920px 例如宽）这将自动设置为 125% 缩放。但是 IE、Edge 和 Firefox 都以自己的方式继承了这个 125% 的值，并最终将其应用为浏览器缩放，从而为这个 bug 在过去 5 年或 六年。

在 Bootstrap 中查看在 similar issue 上打开的讨论。一个有说服力的报价：

即使在缩放时，Chrome 也不会报告十进制视口宽度，我 假设它在应用媒体查询时对值进行四舍五入。

我想很方便。

简而言之，我会在此处放弃 max-width 或 min-width 并使用重叠规则，让后一个规则成为决定者。