使用多个CSS媒体查询麻烦

Question

我的代码在下面。在此CSS文件的末尾，我使用了两个不同的媒体查询作为两个不同屏幕尺寸的断点。但是，只有第一个是生效。尽管最小和最大屏幕尺寸，第二个根本没有效果。有人可以告诉我为什么这可能是吗？老实说，我不知道我可以提供什么进一步的信息，但是我对任何问题都开放。提前致谢。

另外...

这里的NAV栏容器似乎并没有真正固定在移动视图中。实际上，它将在粘贴在屏幕顶部之前稍微向下滚动一点容器的长度。在桌面视图中，这不会发生。在这里有人可以看到可能会引起这种情况吗？再次感谢。

编辑： 我一直在实验，似乎只有375宽度的问题。如果我使用@media屏幕和（最小宽度：361px）和（max-width：375px），它将在宽度375。但是，如果我使用@Media屏幕和（最小宽度：361px）和（max-width：376px），它在376很好。我不明白。

* {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.main {
    position: absolute;
    background: transparent;
    height: 100vh;
    width: 100vw;
}

.container {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height: 7.5vh;
    background-color: rgba(0,0,0,0.65);
    overflow: hidden;
}

.nav {
    margin-top: 3px;
}

.nav a {
    color: rgba(50, 236, 191, 1);
    text-shadow: 2px 2px rgba(183, 35, 35, 1);
    text-decoration: none;
    display: block;
}

.nav a:hover {
    color: rgb(93, 250, 90);
}

.nav li {
    list-style-type: none;
    float: left;
    margin-bottom: 6px;
}

.navLeft {
    padding-left: 20px;
}

.navRight {
    padding-right: 30px;
}

.navLeft a {
    margin-left: 30px;
}

.navRight a {
    margin-right: 30px;
}

.logo {
    position: absolute;
    width: auto;
    transition: all .5s;
}

.logoHero {
    height: 20vw;
    transform: translate(45vw, 15vw) rotate(-10deg);
    filter: drop-shadow(7px 7px rgba(183, 35, 35, 1));
}

.logoNav {
    position: fixed;
    height: 10vh;
    transform: translate(40vw, 1.5vh) rotate(-10deg);
    filter: drop-shadow(3px 4px rgba(183, 35, 35, 1));
}

/********************** RESPONSIVE BREAKPOINTS ********************************/

@media (min-width: 1px) and (max-width: 360px){
    .nav ul {
        display: none;
    }

    .logoHero {
        height: 30vw;
        transform: translate(10vw, 30vw) rotate(-10deg);
        filter: drop-shadow(7px 7px rgba(183, 35, 35, 1));
    }
    
    .logoNav {
        position: fixed;
        height: 8vh;
        transform: translate(5vw, 1.5vh) rotate(-10deg);
        filter: drop-shadow(3px 4px rgba(183, 35, 35, 1));
    }
}

/* THIS BREAKPOINT DOES NOT WORK */

@media (min-width: 361px) and (max-width: 375px){
    .nav ul {
        display: none;
    }

    .logoHero {
        height: 30vw;
        transform: translate(10vw, 30vw) rotate(-10deg);
        filter: drop-shadow(7px 7px rgba(183, 35, 35, 1));
    }
    
    .logoNav {
        position: fixed;
        height: 8vh;
        transform: translate(5vw, 1.5vh) rotate(-10deg);
        filter: drop-shadow(3px 4px rgba(183, 35, 35, 1));
    }
}

Answer 1

元标记应在HTML文档中的标签中添加。请检查是否添加了

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS代码的顺序顺序也很重要。请通过以下内容更改序列：

@media (min-width: 361px) and (max-width: 375px){
        /*Your Styles*/
    }

@media (min-width: 1px) and (max-width: 360px){
            /*Your Styles*/
    }

替代... ，因为您使用的是相同的样式，请使用逗号作为分隔计，如下所示。

@media (min-width: 361px) and (max-width: 375px), @media (min-width: 1px) and (max-width: 360px) {
            /*Your Styles*/
        }

请参阅： https://developer.mozilla.org/en-us/docs/web/css/media_queries/using_media_queries

precedce
，被解释为分界符的单个媒体查询列表。因此，首先评估逗号之间的每个媒体查询，然后它们在一起。这给出了逗号 /或最低优先级。

不始终适用于整个媒体查询，而无需扩展逗号。这给出了逗号 /或之后的第二最低预定。

不是，只有是相互排斥的，并且具有相同的优先级。
和具有最高优先级

（）括号仅在媒体特征及其值周围使用，即（颜色）或（最小宽度：320px）。它们可能不会通过分组表达来改变优先级。