使菜单响应 - 手机/平板电脑大小[关闭]

Question

所以我正在制作一个菜单。到目前为止，我已经构建了它，它看起来很漂亮，但是当在移动设备或小型平板电脑上查看它时，我希望菜单消失，由“菜单”按钮代替。

有什么建议吗？

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

查看菜单 here 和 CSS here。

Answer 1

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

可以在here找到相关文档

注意：这仅在 IE9 及更高版本中完全支持

Answer 2

例如，尝试输入您的代码以查看差异并评论您的代码

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