为什么方向改变时不应用css？

我正在使用媒体查询。我有一个宽度为360，高度为640的设备。实际上，我添加了边框来检查方向改变时是否应用了css

但当我改变方向时，它只显示红色边框。它没有显示其他边界为什么

@media screen and (max-width: 360px), screen and (max-height: 640px)and (orientation: portrait) {
    .subcontent_h {
        height: 200px;
        overflow: auto;
        margin-top: 10px;
        border: 1px solid deeppink !important;
    }
}

@media screen and (max-width: 640px) , screen and (max-height: 360px)and (orientation: landscape) {
    .subcontent_h {
        height: 200px;
        overflow: auto;
        margin-top: 10px;
        border: 1px solid red !important;
    }
}

---

首先使用Modernizer检查您的设备是否支持媒体查询

确保你已经在头部添加了下面的元标记

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

规范顺序：当所有其他冲突时，作为最后手段 分辨率规范无法确定应采用哪种样式 优先级，最后指定的样式将是使用的样式

---

您是否检查过您的设备是否能识别深粉色？试着用绿色或类似的东西替换它。好的，我会用blacktw检查为什么这个问题用javascript和jquery标记，而它与此无关。@scragar我用黑色，但它不起作用你可以只交换2@media规则，而不用

！重要信息

此处标记。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

 @media screen and (max-width: 360px) and (max-height: 640px)
    {
      .subcontent_h {
         height: 200px;
         overflow: auto;
         margin-top: 10px;
         border: 1px solid deeppink !important;
      }
    }

  @media screen and (max-width: 640px) and (max-height: 320px)
   {
    .subcontent_h {
       height: 200px;
       overflow: auto;
       margin-top: 10px;
       border: 1px solid red!important;
   }
}

.subcontent_h{
    height: 200px;
    overflow: auto;
    margin-top: 10px; 
}

@media screen and (max-width: 640px) , screen and (max-height: 360px)and (orientation: landscape) {
    .subcontent_h {
        border: 1px solid red;
    }
}

@media screen and (max-width: 360px), screen and (max-height: 640px)and (orientation: portrait) {
    .subcontent_h {       
        border: 1px solid black;
    }
}