Question

我正在使用媒体查询。我的设备宽度为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;
    }
}

Answer 1

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

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

DEMO

Answer 2

@media screen and (max-width: 360px), (min-device-width: 360px) and (max-device-width: 640px) and (orientation : portrait) {
/* CSS */ 
}


@media screen and (min-width: 360px) and (max-width:640px), (min-device-width: 360px) and
(max-device-width: 640px) and (orientation : landscape) {
/* CSS */ 
}

Answer 3

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

确保在头部

中添加了以下元标记

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

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

3 个答案: