从桌面站点删除移动菜单按钮

Question

我正在 HTML 网站上工作并添加移动菜单。我能够添加菜单，但无法使用打开该菜单的按钮。这就是我所拥有的。

<a id="simple-menu" href="#sidr">
<img class="hidedesktop" src="img/menu-icon.png" alt="Menu">
</a>

当我按下图像时，它会打开菜单。我需要它从桌面上的页面中删除它并在移动设备上显示。我一直在做一些研究，发现

display:none;

应该可以在@media 中使用，但我尝试过但无法正确设置。谁能告诉我我做错了什么？下面是我的 CSS 隐藏桌面。

.hidedesktop{
    display:block;
}

and CSS for @media remove on desktop

/*@media only screen and (max-width: 768px) {
.hidedesktop{
    display:block;
    }
}
@media only screen and (min-width: 768px) {
.hidedesktop{
    display:none;
}
    }
}
*/

我也想在移动版上隐藏主菜单，但如果我得到这方面的帮助，我想我会解决的。

Answer 1

你只需要最小宽度。

@media only screen and (min-width: 768px) {
    .hidedesktop {
        display:none;
    }
}

或者如果你想使用最小设备宽度（不太可能），如果你不确定，请务必查看下面的 link .

@media only screen and (min-devide-width: 768px) {
    .hidedesktop {
        display:none;
    }
}

Read here to learn the differences

从桌面站点删除移动菜单按钮

Remove Mobile-Menu Button from desktop site

html

css

mobile

desktop

menu