为什么@media 分辨率大于1680时也会应用1680里的样式呢

@media only screen and (max-width:1920px) { 
    .header {
        background-color: rgba(46, 91, 143, 0.322);
    }
}
@media only screen and (max-width:1680px) { 
    .header {
        background-color: #ccc;
    }
}

是你设置的区间有问题，你还是理解好min-width和max-width先吧


<!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>
    <style>
        .header {
            height: 50px;
            width: 100%;
        }
        @media screen and (max-width:1200px) {
            .header {
                background-color: red;
            }
        }
        @media screen and (min-width:1200px) and (max-width:1920px) {
            .header {
                background-color: orange;
            }
        }
    </style>
</head>

<body>
    <div class="header"></div>
</body>

</html>

按照你写的方法，当分辨率大于1680时并不会应用1680里的样式，你再检查一下其他代码吧