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

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;
}

和 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;
    }
}

或者如果您愿意(不太可能)使用最小设备宽度，如果您不确定，请务必查看下面的链接。

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

Read here to learn the differences