媒体查询更改未反映

Question

我正在尝试使用媒体查询来控制菜单的宽度。下面是我用于不同分辨率的那个。

@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
  .cbp-spmenu-vertical {
    width: 20%;
    top: 0;
    z-index: 1000;

}
@media screen 
  and (min-device-width: 500px) 
  and (max-device-width: 1100px) 
   and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) { 
  .cbp-spmenu-vertical {
    width: 20%;
    top: 0;
    z-index: 1000;

}
}
@media  screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
 {

  .cbp-spmenu-vertical {
    width: 35%;
    top: 0;
    z-index: 1000;

}}

@media  screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
 {

  .cbp-spmenu-vertical {
    width: 25%;
    top: 0;
    z-index: 1000;

}}

即使在更改分辨率时，它总是采用我已定义为默认值的css。

.cbp-spmenu-vertical {
    width: 15%;
    /* height: 100%; 
    margin :50px;*/

    top: 0;
    z-index: 1000;
}

我的html中也有视口元标记。

<link type="text/css" rel="stylesheet" href="Angular/css/landscape/ta-menu.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<!-- App Body -->
<!-- <div id=map style="width: 100%"></div> -->
<div id="menu" class="cbp-spmenu-push">
    <div id="cbpspmenus1" class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" ng-class="{'cbp-spmenu-open':isActive}">
        <div id="tools">
            <table>
                <tr>
                    <td><input type="text" id="searchInput" placeholder="Type To Filter" ng-model="search" class="searchMenu"></td>
                    <td><button id="home" class="homeButton"><i class="fa fa-home fa-2"></i></button></td>
                    <td><button id="keep-menu-open" class="pinColor"ng-click="openAndFixMenu"><i class="pinColor"></i></button></td>
                    <td><button id="open-left" class="toggleButton" ng-click="toggleMenu()"> <i class="fa fa-bars fa-2"></i></button></td>
                </tr>
            </table>
        </div>
        <div id="accordion">
            <accordion-menu ng-if="jsonstring.length>0" menu='jsonstring'></accordion-menu>
        </div>
    </div>
</div>

在另一种情况下，我使用基于不同分辨率的媒体查询来更改菜单中的字体大小，并且工作正常。上述媒体查询可能有什么问题。