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

Question

I want to make responsive page using react JS.我想使用 react JS 制作响应式页面。 I have some problems making it.我在制作它时遇到了一些问题。 I don't really know how media query CSS works, but for @media(max-width:1024) and @media(max-width:768px) sizes it works as I expected.我真的不知道媒体查询 CSS 是如何工作的，但是对于@media(max-width:1024)和@media(max-width:768px)大小，它按我的预期工作。 I guess for size @media (max-width:425px) will also work as where @media(max-width:768px) works.我猜大小@media (max-width:425px)也可以像@media(max-width:768px)一样工作。 But apparently starting from @media(max-width:425px) it follows the previous breakpoint( @media(max-width:768px) ) and @media(max-width:375px) following the @media(max-width:425px) style.但显然从@media(max-width:425px)开始，它遵循上一个断点（ @media(max-width:768px) ）和@media(max-width:375px)之后的@media(max-width:425px)风格。 At breakpoint 320px back to my expectations.在断点 320px 处回到我的预期。

This is my html:这是我的 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>

And this is my CSS code:这是我的 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;
    }
}

Is there a way for each breakpoint to take its own style.有没有办法让每个断点采取自己的风格。 As in max-width:1024px which takes a yellow background and max-width:768px takes a green background.如max-width:1024px采用黄色背景和max-width:768px采用绿色背景。 Is it possible if I want if at max-width:425px it takes a blue background and at max-width:375 it takes a rosybrown color.如果我想在max-width:425px它采用蓝色背景并且在max-width:375它采用玫瑰色棕色，是否有可能。 Thank you in advance.先感谢您。

Answer 1

Try adding the only screen尝试添加唯一的屏幕

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

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

问题描述

1 个解决方案

解决方案1
0 2021-11-27 12:09:10

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

问题描述

1 个解决方案

解决方案1 0 2021-11-27 12:09:10

解决方案1
0 2021-11-27 12:09:10