仅在移动设备上隐藏内容

Question

我希望我的网站 (mobile/desktop) 的菜单看起来像这样：http://www.panic.lv/en/（移动时的主页除外）桌面版 - 显示链接 "HOME"、"WORKS"、"ABOUT" 和 "CONTACTS" 手机 - 没有链接，只有徽标

我关注了this instructions，但他们似乎没有完全发挥作用。

HTML

<div id="wrapper">
    <ul class="menu">
        <div id="home"><a href="index.html">HOME</a></div>
        <div id="works"><a href="workshome.html">WORKS</a></div>
        <div id="logo"></div>       
        <div id="about"><a href="about.html">ABOUT</a></div>
        <div id="contacts"><a href="contacts.html">CONTACTS</a></div>
    </ul>
</div>

CSS

  #wrapper {
    margin-left: 30px;
    margin-right: 30px;
    background-color: none;
    margin-top: 30px;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
}

.menu {
    width: 100%;
    height: 100%;
    background-color: none;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    padding: 0px;
}

@media screen and (min-width: 991px) {
#home {
    margin-left: 0px;
    height: 30px;
    width: 20%;
    font-family: 'Ropa Sans', sans-serif;
    color: ghostwhite;
    font-size: 15px;
    font-weight: normal;
    background-color: none;
    box-sizing: border-box;
    text-align: right;
}

#works {
    height: 30px;
    width: 20%;
    font-family: 'Ropa Sans', sans-serif;
    color: ghostwhite;
    font-size: 15px;
    background-color: none;
    box-sizing: border-box;
    text-align: center;
}


#about {
    height: 30px;
    width: 20%;
    font-family: 'Ropa Sans', sans-serif;
    color: ghostwhite;
    font-size: 15px;
    background-color: none;
    box-sizing: border-box;
    text-align: center;    
}


#contacts {
    height: 30px;
    width: 20%;
    font-family: 'Ropa Sans', sans-serif;
    color: ghostwhite;
    font-size: 15px;
    background-color: none;
    box-sizing: border-box;
    text-align: left;
    } }

Answer 1

@media screen and (max-width: 991px) {
    .menu{
        display:none;
    }
}

Answer 2

将 display: flex 更改为 display: none; 以隐藏菜单的现有 .menu 规则。

然后，将此添加到您的 CSS 文件以在特定屏幕尺寸以上打开它：

@media (min-width: 1000px) {
    .menu {
        display: flex;
    }
}

（尺寸 1000px 是一个填充物。取决于您是只谈论手机，还是平板电脑，或者其他什么，您必须更改它）

编辑 - 上面的答案很适合隐藏整个菜单，我将它留给研究该简单选项的任何人。下面是我从这个问题中忽略的更具体的参数。

忽略上述答案的变化。

如果您想通过对代码进行最少的更改/额外的 HTML 来做到这一点，您只需将其添加到您的 CSS:

.menu div {
    display: none;
}
.menu div#logo {
    display: block; !important
}
@media (min-width: 991px) {
    .menu div {
        display: block;
    }
}

但是，我强烈建议更稳定（并且以后更容易编辑）的解决方案是将 class="links" 添加到徽标以外的每个 div，然后使用以下 CSS:

.menu div.links {
    display: none;
}
@media (min-width: 991px) {
    .menu div.links {
        display: block;
    }
}

仅在移动设备上隐藏内容

Hide Content On Only Mobile

html

css

mobile

hide

media-queries