奇怪的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
• 绿色从601px到1000px
• 红色从1001px到...

相反,它是:

• 蓝色从0px到600px
• 白色在601px
• 绿色从602px到1000px
• 白色在1001px
• 红色从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
• 绿色从601px到1000px
• 红色从1001px到...

相反,它是:

• 蓝色从0px到599px
• 绿色从600px到999px
• 红色从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”前缀均包含在内。引用规范：

\n\n

\n

大多数媒体功能接受可选的 \xe2\x80\x98min-\xe2\x80\x99 或 \xe2\x80\x98max-\xe2\x80\x99 前缀来表示“大于或等于”和“小于或等于”限制。

\n

\n\n

问题有点不同：虽然您期望像素尺寸为整数，但情况并不总是这样。这篇文章非常详细地描述了这个问题：

\n\n

\n

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

\n\n

在 Windows 7 及更高版本上，操作系统对文本和图标等内容使用缩放级别，在较大的屏幕（例如 1920 像素宽）上，缩放级别将自动设置为 125%。但 IE、Edge 和 Firefox 都以自己的方式继承了这个 125% 的值，并最终将其应用为浏览器缩放，从而为这个 bug 在过去五年中默认出现在大多数具有不错分辨率屏幕的 Windows 机器上创造了条件\n六年。

\n

\n\n

检查 Bootstrap 中类似问题的讨论。一个有说服力的引用：

\n\n

\n

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

\n

\n\n

我想，相当方便。

\n\n

简而言之，我会在这里放弃max-width或min-width并采用重叠规则，让后一个规则成为决策者。

\n