Javascript 使菜单更具响应性-手机/平板电脑尺寸

所以我在做菜单。到目前为止，我已经建立了它，它看起来都很漂亮，但当它在移动或小型平板电脑上观看时，我希望菜单消失，被一个“菜单”按钮取代

有什么建议吗

我的菜单是由每个菜单项的div组成的，而不是列表，因此在网上找不到任何有用的东西。干杯：）

---

查看菜单和CSS。

您可以使用

@media

查询来指定屏幕的宽度或高度。当屏幕宽度小于指定大小时，您可以使用此选项隐藏div并显示菜单图标

可以找到这方面的文档

---

注意：这仅在IE9及以上版本中得到完全支持。例如，请尝试输入代码以查看差异和您对代码的注释

@media (min-width:320px) { background: blue; }
@media (min-width:481px) { background: orange; }
@media (min-width:641px) { background: pink; }
@media (min-width:961px) { background: gray; }
@media (min-width:1025px) { background: white; }
@media (min-width:1281px) { background: red; }

---

请看本教程，它很好地解释了错误只存在于媒体中，或者在这里，我真的还不太理解，我仍处于早期学习阶段。你能更具体地解释一下我要做什么吗？很抱歉有点麻烦欢迎来到堆栈溢出！欢迎来到堆栈溢出！这个问题要么过于宽泛，基于观点，要么需要讨论，因此对于堆栈溢出来说是离题的。如果您有一个具体的、可回答的编程问题，请提供完整的细节。我真的还不太了解，我仍处于早期学习阶段。你能更具体地解释一下我要做什么吗？抱歉，有点麻烦。你愿意使用一点非常简单的JS吗？在你的CSS中，你使用了

@media

查询，所以我想你知道如何使用它们？基本上，当屏幕宽度小于平板电脑屏幕时，在菜单上将CSS设置为

display:none

。然后创建（菜单按钮的）图像，并将其设置为

display:none

。当屏幕宽度足够小时，设置CSS

显示：

块

或

内联块

。然后您可以使用JavaScript检测何时单击菜单按钮，并将

菜单

的CSS更改为

显示：

块

或

内联块

@ALan，如果这回答了您的问题，请将其标记为已接受。我已经设法使菜单重新缩放，现在我希望菜单在较小的屏幕上完全消失，直到按下“菜单”。我也不知道如何使“菜单”按钮自动出现在一个较小的屏幕上。请把代码放在jsfidle中