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链接，因为您可以轻松调整视口大小。 https://www.w3schools.com/code/tryit.asp?filename=FDW9EOFLTCX6 但是，它并不像我想要的那样有效。对于黄色背景（<500px），它保持黄色直到包括500。对于蓝色背景（＆gt; = 500px＆amp;＆amp;＆lt; 1000px），它保持蓝色直到包括1000。对于这两种情况，颜色跳跃分别发生在501和1001。但是，如果我将宽度值分别调整为499和999，则颜色突然发生在499和999处。我似乎无法理解如何让改变恰好发生在500和1000.或者这只是我发布的编辑器的一个问题？

Answer 1

这取决于你想要跳跃的地方＆＃39;要发生这种情况，但假设您希望背景在yellow 500px和blue 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，并且媒体查询将始终优先从上到下依次。< / p>

希望这有帮助！

Answer 2

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

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

你想根据媒体屏幕怀疑css。试一试，它有助于创建响应式布局。

HTML / CSS：@media用于确切的屏幕尺寸

2 个答案: