HTML/CSS：@media 用于精确的屏幕尺寸答案

【问题标题】：HTML/CSS: @media for exact screen sizeHTML/CSS：@media 用于精确的屏幕尺寸
【发布时间】：2017-03-23 17:06:16
【问题描述】：

我正在尝试稍微了解一下 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 &&

【问题讨论】：

可能与您使用的浏览器有关。我的按预期工作
也可以指定@media screen and (max-width: 500px) and (min-width: 1000px)
更改为 499 和 999 后，我的浏览器 (Chrome 57) 恰好在 500 和 1000 发生。

标签： html css

【解决方案1】：

这取决于您希望“跳跃”发生的位置，但假设您希望背景为yellow500px 和blue 在501px 和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，而且媒体查询总是优先从上到下依次。

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

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

你想根据媒体屏幕写成 css 。试试吧，它对创建响应式布局很有帮助。

【讨论】：