我希望第二个菜单出现在媒体上

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在台式机上display:none移动版本，在移动设备上display:none显示块。 我输入了代码，但它没有读取media命令。 有任何想法吗？

Answer 1

您没有指定最大宽度。 尝试这个：

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

编辑：

就像Quentin在注释中建议的那样：您的代码示例不完整，或者您忘记了<style>起始标记。