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

两个＆＃39; min＆＃39;和＆＃39; max＆＃39;前缀包括在内。引用the spec：

大多数媒体功能都接受可选的'min-'或'max-'前缀表达＆＃34;大于或等于＆＃34;和＆＃34;小于或等于＆＃34;约束

问题有点不同：虽然您希望像素尺寸为整数，但并不总是如此。 This article在很多细节上描述了这个问题：

您可能会想到＆＃34;半个像素？这是不可能的＆＃34;，并且最多   部分原因不是。但是，如果您使用Ctrl +或Ctrl-来更改浏览器   然后缩放，你经常会得到非整数视口大小，并且   工作时浏览器可以使用非整数视口大小   将哪些媒体查询应用于页面[...]

在Windows 7及更高版本上，操作使用缩放级别   系统用于文本和图标，以及更大的屏幕（1920px   例如，这将自动设置为125％缩放。但是IE，Edge和Firefox都以自己的方式继承了这个125％的价值并最终将其应用为浏览器缩放，为此错误创造了条件，默认情况下，在过去五年中具有不错分辨率屏幕的大多数Windows机器上或   六年。

检查Bootstrap中similar issue上打开的讨论。一句话：

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

我想这很方便。

简而言之，我在这里删除了max-width或min-width，并采用重叠规则，让后者成为决策者。

奇怪的CSS媒体查询逻辑

1 个答案: