如何让@media(max-width 425px) 单独工作，而不是跟随@media(max-width 768px)答案

【问题标题】：How to get @media(max-width 425px) to work alone, and not follow @media(max-width 768px)如何让@media(max-width 425px) 单独工作，而不是跟随@media(max-width 768px)
【发布时间】：2022-01-04 21:56:51
【问题描述】：

我想使用 react JS 制作响应式页面。我在制作它时遇到了一些问题。我真的不知道媒体查询 CSS 是如何工作的，但是对于 @media(max-width:1024) 和 @media(max-width:768px) 大小，它可以按我的预期工作。我猜@media (max-width:425px) 的大小也可以像@media(max-width:768px) 一样工作。但显然从@media(max-width:425px) 开始，它遵循上一个断点（@media(max-width:768px)）和@media(max-width:375px) 遵循@media(max-width:425px) 样式。在断点 320px 处回到我的预期。

这是我的html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="container">
        This is content
    </div>
</body>

</html>

这是我的 CSS 代码：

.container{
    background-color: red;
    height: 100vh;
}

@media(max-width:1024px){
    .container{
        background-color: yellow;
    }
}
@media(max-width:768px){
    .container{
        background-color: green;
    }
}
@media(max-width:425px){
    .container{
        background-color: blue;
    }
}
@media(max-width:375px){
    .container{
        background-color: rosybrown;
    }
}
@media(max-width:320px){
    .container{
        background-color: rosybrown;
    }
}

有没有办法让每个断点采取自己的风格。如max-width:1024px 采用黄色背景，max-width:768px 采用绿色背景。如果我想在max-width:425px 它采用蓝色背景并且在max-width:375 它采用玫瑰棕色，是否有可能。提前谢谢你。

【问题讨论】：

对我来说很好用。
您在此处发布的代码应该可以按预期工作。检查拼写错误、非封闭或多余的括号和类似的东西
@Spectric 真的吗？即使我们在 chrome 上重置响应式 425px，它也会采用蓝色背景？
@Johannes 我检查了，但还是不行

标签： javascript html css reactjs typescript

【解决方案1】：

尝试添加唯一的屏幕

@media(only screen and max-width:768px){
    .container{
        background-color: green;
    }
}

【讨论】：

显示错误意外
@media only screen and (max-width: 600px) { body { background-color: lightblue; } } 试试上面的代码，然后改成小于600px的屏幕，看看颜色会不会变