html - 我希望第二个菜单位于媒体

Question

我只想在移动设备上显示第二个菜单，但代码没有响应。

@media (max-width: 480px) {
  .branding {
    background: red!important;
  }
}

<div class="branding">
  <div class="branding2">
    <div class="logo_main">
      <a href="http://#.gr/"><img class=" preload-me" src="http://#.gr/wp-content/uploads/2018/01/logo-#-small.png" srcset="http://#.gr/wp-content/uploads/2018/01/logo-#-small.png 350w, http://#.gr/wp-content/uploads/2018/01/logo-#-big.png 600w" width="350" height="73" sizes="350px"
          alt="Studio Alex"></a>
    </div>
    <div class="menu_main">
      <ul style="list-style:none;" id="primary-menu" class="main-nav underline-decoration upwards-line outside-item-remove-margin" role="menu">
        <li style=" float:left;" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-146 first"><a style="display:block;text-align:center;padding:14px 16px; text-decoration:none;" href="http://#.gr/?page_id=141" data-level="1"><span class="menu-item-text"><span class="menu-text">Photography</span></span></a></li>
        <li style="float:left;" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a style="display:block;text-align:center;padding:14px 16px; text-decoration:none;" href="http://#.gr/?page_id=61" data-level="1"><span class="menu-item-text"><span class="menu-text">Cinematography</span></span></a></li>
        <li style="float:left;" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-445"><a style="display:block;text-align:center;padding:14px 16px; text-decoration:none;" href="http://#.gr/?page_id=442" data-level="1"><span class="menu-item-text"><span class="menu-text">Contact</span></span></a></li>
        <li style="float:left;" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-567"><a style="display:block;text-align:center;padding:14px 16px; text-decoration:none;" href="http://#.gr/" data-level="1"><span class="menu-item-text"><span class="menu-text">Home</span></span></a></li>
      </ul>
    </div>
  </div>
</div>

我需要在桌面上display:none 移动版本，在移动设备上显示 block 。我输入了代码，但它没有读取媒体命令。有任何想法吗？

Answer 1

您没有指定什么的最大宽度。 试试这个:

@media screen and (max-width: 480px) {
    .branding {
      background:red!important;
    }
}

编辑:

就像 Quentin 在评论中建议的那样:要么您的代码示例不完整，要么您忘记了 <style>开始标签。