使菜单响应 - 移动/平板电脑大小

Question

所以我在菜单上工作。到目前为止，我已经构建了它并且它看起来很漂亮，但是当它在移动设备或小型平板电脑上观看时，我希望菜单消失以替换为＆＃34; MENU＆＃ 34;按钮。

有什么建议吗？

我的菜单是由每个菜单项的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; }