HTML/CSS : @media for exact screen size

Question

我想稍微了解一下 CSS，但我目前有点受困于@media 规则和屏幕尺寸。我想根据当前分辨率更改背景颜色。这是 CSS:

section {    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: 10px;
    background-color: brown;
}

@media screen and (max-width: 9999px) {
    section {
        background-color: red;
    }
}

@media screen and (max-width: 1000px) {   
    section {
        background-color: blue;
    }
}

@media screen and (max-width: 500px) {
    section {
        background-color: yellow;
    }  
}

只是使用一个简单的

<section>
    bla
</section>

HTML 代码。这是一个 w3schools tryit 链接，因为您可以轻松调整视口(viewport)的大小。 https://www.w3schools.com/code/tryit.asp?filename=FDW9EOFLTCX6但是，它不像我想要的那样工作。对于黄色背景(< 500 像素)，它将保持黄色直到包含 500 像素。对于蓝色背景 (>= 500px && < 1000px)，它保持蓝色直到包含 1000。对于这两种情况，颜色跳跃分别发生在 501 和 1001。但是，如果我将宽度值分别调整为 499 和 999，颜色跳跃会突然发生在 499 和 999 处。我似乎不明白如何让更改恰好发生在 500 和 1000。还是我发布的编辑器有问题？

Answer 1

这取决于您希望“跳跃”发生的位置，但假设您希望背景在 500px 和 blue 之间为 yellow 501px 和 999px，您可以简单地使用以下内容:

@media screen and (min-width: 501px) and (max-width: 999px) {
    section {
        background-color: blue;
    }
}


@media screen and (max-width: 500px) {
    section {
        background-color: yellow;
    }  
}

不要忘记，您还可以使用 min-width 以及 max-width，并且媒体查询始终优先从顶部开始到底部。

希望这对您有所帮助!