HTML/CSS:@media用于精确的屏幕大小

我试着理解一下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代码。这里有一个链接，因为您可以轻松调整视口的大小。 然而，它不像我希望的那样工作。 对于黄色背景（<500px），它将保持黄色，直到包含500像素。 对于蓝色背景（>=500px&&<1000px），它将保持蓝色直到包含1000。 对于这两种情况，颜色跳跃分别发生在501和1001处。但是，如果我将宽度值分别调整为499和999，则颜色跳跃会突然发生在499和999处。

---

似乎我不明白如何让变化发生在500和1000之间。或者这只是我发布的编辑器的一个问题？

这取决于您希望“跳转”发生的位置，但是假设您希望背景在

500px

处为

黄色

，在

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;
    }  
}

不要忘记，您还可以使用

minwidth

以及

max width

，并且媒体查询将始终按从上到下的顺序优先

---

希望这有帮助

我认为完美的响应媒体查询标签就是这个

 @media (min-width:1600px) and (max-width:3600px) {
.model-student-gallery .modal-lg {
    width: 60%;
} 
} 

您希望根据媒体屏幕来编写css。

---

试试看，这有助于创建响应性布局

可能与您使用的浏览器有关。我的工作正常您也可以指定

@媒体屏幕和（最大宽度：500px）和（最小宽度：1000px）

更改为499和999后，我的浏览器（Chrome 57）正好在500和1000处。