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

和@media删除桌面上的CSS

/*@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;
    }
}

或者如果你想要使用min-device-width（不太可能），如果你不确定，请务必查看下面的链接。

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

Read here to learn the differences

从桌面站点删除Mobile-Menu按钮

1 个答案: