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

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

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

修改

这是一个PEN，你可以看看它。 http://codepen.io/yisera/pen/xdGKh

***** UPDATE ******

在评论媒体查询以查看问题所在之后，我发现所有媒体查询都能正常工作，除了这一点：

@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在聊天中所说的那样，＆＃34;您是否知道我如何制定媒体查询以仅定位移动电话的景观？＆＃34;

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