隐藏移动屏幕上的元素媒体查询

Question

我在移动方面遇到了一些小问题。我是从移动设备向上构建的，所以我的媒体查询会随着屏幕大小的增加而处理。我有一个问题，当我的移动div放大时，我可以隐藏它，但如果我想在放大的媒体查询中隐藏一个div，如果我把它放在移动中隐藏它，它会隐藏它吗？

html:

<div id="menumobile">
<div id="nav-mobile">
       <a href="#"><img src="menu.jpg"/></a>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>

</div>
</div>

<div id="menularge">Main menu</div>

CSS：

#menumobile{
    background-color: #FFF;
    text-align:center;
}
#mainmenu{
    display: none;
}
#nav-mobile {
    display: block;
    padding-top: 12px;
    height: auto;
    min-height: 33px;
    overflow: hidden;
    font-size: 0.9em;
    background: none;  
}
#nav-mobile, #nav-mobile ul, #nav-mobile li {
    position: relative; 
     background: none;  
}
#nav-mobile ul {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #F1F1F1;
    padding: 20px 0 20px 0;
}
#nav-mobile ul li {
    width: 100%;
    display: block; 
    padding: 13px 0 13px 0;
    margin: 0;
    background: none;
}
#nav-mobile ul a{
    color: #000;
    text-decoration:none;
    font-size: 18px;
}
#nav-mobile ul a:hover {
    background: none; 
    color: #FFF;     
}
#nav-mobile ul li:hover {
    background-color: #005e48;
        color: #FFF;
}

我的目标是#menularge id，所以我希望它隐藏在手机屏幕上，并在放大时显示。但如果我把它隐藏在移动css中，它会向上杀死它。

Answer 1

看起来您需要一个媒体查询。试试这样的东西（只要你想让600px出现，就用它代替）：

@media all and (min-width: 600px){
    #mainmenu{
        display: block;
    }
}

您可以在此处了解有关媒体查询的更多信息：http://css-tricks.com/css-media-queries/它们对于响应式设计非常有用。

Answer 2

在放大的媒体查询中，您可以添加display: visible。

#mainmenu{
    display: visible;
}

另一个选择，也是我过去所做的，是将移动媒体查询移动到CSS的末尾，或者至少在放大媒体查询之后。

当然，这是假设您在媒体查询之间显示代码。