使“菜单”按钮出现在较小的屏幕上答案

【问题标题】：Make "menu" button appear on smaller screens使“菜单”按钮出现在较小的屏幕上
【发布时间】：2015-12-02 04:21:24
【问题描述】：

所以我制作了一个菜单，当屏幕尺寸小于 560 像素时，它会从水平变为垂直。有人能告诉我现在如何使菜单消失，屏幕尺寸小于 560 像素，而是出现“菜单”按钮，当按下按钮时，菜单会出现。 http://ahdecor8.co.uk/menu/ 如果你缩小屏幕尺寸，你会明白我的意思。我对编码很陌生，所以请用尽可能简单的术语解释一下：）提前谢谢你！

【问题讨论】：

你看过媒体查询吗？

标签： html css menu responsive-design

【解决方案1】：

您应该使用media queries。它看起来像这样

@media screen and (max-width: 560px) {
    menu {
        display:none;
    }
}

【讨论】：

【解决方案2】：

Media Queries 是您所追求的。它们允许您为给定布局指定最大和最小分辨率。一旦屏幕尺寸小于提供的尺寸，您就可以显示一个单独的菜单。

例如，您可以使用类似的方式显示/隐藏特定菜单

@media only screen and (min-width: 320px) and (max-width: 768px) {
  .nav-mobile {
    display:block;
  }
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
  .nav-list {
    display:none;
  }
}

或者，如果屏幕在给定大小范围内，您可以修改选择器以简单地设置不同的导航区域样式。

【讨论】：

【解决方案3】：

您需要创建另一个 div 例如：

<div class="example"> menu </div>

@media (max-width:560px) { 
  #bottom_nav { display: none}
  .example { display: block; background: blue; width: 100%; }
}

@media (min-width:561px) { 
  #bottom_nav { display: block;}
  .example { display: none; }
}

【讨论】：