Css 媒体查询'；在上下文之外应用的类

我有以下传媒查询:

@media only screen and (max-width : 320px){
    .jumbotron-startup{
        min-height: 100vh;
        height: auto;
    }
    .jumbotron-slide-2 p, .jumbotron-slide-2 h2{
        display: none;
    }
    .startup-card{
        height: auto;
        background-color: inherit;
    }
}
@media only screen and (min-width : 321px){
    .jumbotron-startup{
        min-height: 130vh;
        height: auto;
    }
    .jumbotron-slide-2 p, .jumbotron-slide-2 h2{
        display: none;
    }
    .startup-card{
        height: auto;
        background-color: inherit;
    }
    .sh-portrait{
        display: inline-block;
    }
    #yes-startup{
        margin-bottom: 10px;
    }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .jumbotron-what-is-switchhon{
        min-height: 100vh;
        height: auto;
    }
    .space-top{
        margin-top: 0;
    }
    .jumbotron-what-is-switchhon p{
        font-size: 1.2em;
        text-align: center !important;
    }
    .jumbotron-startup img{
        height: 64px;
    }
    .jumbotron-startup p{
        font-size: 1.1em;
    }
}

出于某种原因，这些媒体查询，它们的一些类应用于任何环境中的页面，这意味着即使从我的桌面计算机中的当前显示器的分辨率为1920x1080

我不知道为什么会发生这种情况，因为以前从未发生过。有人知道他们为什么会断章取义吗

在媒体查询之外，我将只列出一些由于某种原因而被覆盖的类：

.startup-card{
    background-color: rgba(255, 255, 255, 0.6);
    color: #333;
    height: 300px;
    border-radius: 5px;
}
.startup-card h2{
    padding-top: 20px;
}
.startup-card p{
    padding: 10px;
    text-align: left;
    font-size: 1.1em;
}
.startup-card img{
    padding-top: 20px;
    width: auto;
    height: 90px;
}

为了确保我们在同一页上，正如许多专家所建议的那样，这些媒体查询位于我的样式表的底部，因为有时如果放在底部以外的其他地方，可能会发生有趣的事情

编辑 这里有一支钢笔给你看

*****更新****** 在对媒体查询进行注释以查看问题所在后，我发现除此之外，所有媒体查询都正常工作：

@media only screen and (min-width : 321px){
    .jumbotron-startup{
        min-height: 130vh;
        height: auto;
    }
    .jumbotron-slide-2 p, .jumbotron-slide-2 h2{
        display: none;
    }
    .startup-card{
        height: auto;
        background-color: inherit;
    }
    .sh-portrait{
        display: inline-block;
    }
    #yes-startup{
        margin-bottom: 10px;
    }
}

---

我不明白为什么，它有正确的语法和所有内容，所有内容都正确关闭，这让我抓狂

将所有媒体查询移动到CSS底部。否则，您在媒体查询中写入的样式将被普通样式覆盖

编辑：

正如OP在chat中所问的那样，“你知道我如何精心设计一个媒体查询，只针对手机的场景吗？”

---

介质查询位于样式表的底部。我知道你的意思，因为几年前我开始使用媒体查询时，这种情况经常发生。但是这一次，它们位于样式表的底部。你能告诉我哪些类也适用于大屏幕吗？这里有一支钢笔。由于某种原因，我不能让猫头鹰旋转木马工作。css的问题在owl旋转木马中。您的代码正在应用。例如，

.jumbotron startup

类正在我的大屏幕上应用属性

min height:130vh

。它来自媒体查询

最小宽度：321px

让我们看看。

 /* #### Mobile Phones Portrait #### */
 @media screen and (max-device-width: 480px) and (orientation: portrait){
    /* some CSS here */
 }

 /* #### Mobile Phones Landscape #### */
 @media screen and (max-device-width: 640px) and (orientation: landscape){
   /* some CSS here */
 }

 /* #### Mobile Phones Portrait or Landscape #### */
  @media screen and (max-device-width: 640px){
    /* some CSS here */
 }

  /* #### iPhone 4+ Portrait or Landscape #### */
 @media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
   /* some CSS here */
 }

 /* #### Tablets Portrait or Landscape #### */
 @media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
 }