背景颜色在每个断点处不改变

Question

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

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>

Answer 1

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

Answer 2

像这样更改您的媒体查询顺序

@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/

Answer 3

你写的都正确。但唯一的错误是您按降序编写了 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;
    }
}

背景颜色在每个断点处不改变

The background color does not change at each breakpoint

html

css

responsive-design

responsive