css - 媒体查询的类在上下文之外应用

Question

我有以下媒体查询:

@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;
}

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

编辑

这里有一支笔给你看一下。 http://codepen.io/yisera/pen/xdGKh

*****更新******

评论媒体查询以查看问题出在哪里后，我发现所有媒体查询都可以正常工作，除了这个:

@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;
    }
}

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

Answer 1

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

编辑:

正如 OP 在聊天中询问的那样，“你知道我如何详细说明媒体查询以仅针对手机的横向显示吗？”

 /* #### 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 */
 }