每个断点的背景颜色都不会改变[重复]答案

【问题标题】：The background color does not change at each breakpoint [duplicate]每个断点的背景颜色都不会改变[重复]
【发布时间】：2020-02-05 16:59:56
【问题描述】：

我一直在研究一个媒体查询，但是背景颜色在我设置的每个断点处都没有改变。我找不到任何解决方案。有谁知道当用户缩小浏览器的宽度时如何更改背景颜色？

style.css

@media (min-width: 1200px) {
    body {
        background: orange;
        color: #742f37;
        font-family: "Caslon", serif;
    }
}
@media (min-width: 1024px) {
    body {
        background: pink;
        color: cornsilk;
        font-family: Gills Sans Extrabold, sans-serif;
    }
}
@media (min-width: 768px) {
    body{
        background: purple;
        color: white;
        font-family: "Georgia", serif;
    }
}
@media (min-width: 667px) {
    body {
        background: cyan;
        color: red;
        font-family: Gills Sans, sans-serif;
    }
}
@media (min-width: 375px) {
    body{
        background: black;
        color: yellow;
        font-family: Helvetica, sans-serif;
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Understanding the media query</title>
</head>
<body>
    <h1></h1>
    <p>I am a web designer. </p>
    <p>I am a graphic designer.</p>
    <p>I am an editorial designer.</p>

<section class="colorBoxes">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>

【问题讨论】：

@JKK 只需将每个 @media break 点的 min-width 替换为 max-width。

标签： html css responsive-design responsive

【解决方案1】：

更改您的媒体查询顺序

@media (min-width: 375px) {
    body{
        background: black;
        color: yellow;
        font-family: Helvetica, sans-serif;
    }
}
@media (min-width: 667px) {
    body {
        background: cyan;
        color: red;
        font-family: Gills Sans, sans-serif;
    }
}
@media (min-width: 768px) {
    body{
        background: purple;
        color: white;
        font-family: "Georgia", serif;
    }
}
@media (min-width: 1024px) {
    body {
        background: pink;
        color: cornsilk;
        font-family: Gills Sans Extrabold, sans-serif;
    }
}
@media (min-width: 1200px) {
    body {
        background: orange;
        color: #742f37;
        font-family: "Caslon", serif;
    }
}

https://jsfiddle.net/lalji1051/o5Lfx490/8/

【讨论】：

太棒了！非常感谢！

【解决方案2】：

你写的一切都是正确的。但唯一的错误是您已按降序编写了 min-width 的媒体查询。您必须像这样按升序编写最小宽度的媒体查询 -

@media (min-width: 375px) {
    body{
        background: black;
        color: yellow;
        font-family: Helvetica, sans-serif;
    }
}
@media (min-width: 667px) {
    body {
        background: cyan;
        color: red;
        font-family: Gills Sans, sans-serif;
    }
}
@media (min-width: 768px) {
    body{
        background: purple;
        color: white;
        font-family: "Georgia", serif;
    }
}
@media (min-width: 1024px) {
    body {
        background: pink;
        color: cornsilk;
        font-family: Gills Sans Extrabold, sans-serif;
    }
}
@media (min-width: 1200px) {
    body {
        background: orange;
        color: #742f37;
        font-family: "Caslon", serif;
    }
}

【讨论】：

非常感谢！我会努力做到的

【解决方案3】：

您的 min-width 查询会在每个断点处覆盖。为避免这种情况，请对每个断点使用 max-width 并更改为预期的颜色。

@media (max-width: 1200px) {
    body {
        background: orange;
        color: #742f37;
        font-family: "Caslon", serif;
    }
}
@media (max-width: 1024px) {
    body {
        background: pink;
        color: cornsilk;
        font-family: Gills Sans Extrabold, sans-serif;
    }
}
@media (max-width: 768px) {
    body{
        background: purple;
        color: white;
        font-family: "Georgia", serif;
    }
}
@media (max-width: 667px) {
    body {
        background: cyan;
        color: red;
        font-family: Gills Sans, sans-serif;
    }
}
@media (max-width: 375px) {
    body{
        background: black;
        color: yellow;
        font-family: Helvetica, sans-serif;
    }
}

【讨论】：

我会修改代码。非常感谢！！