Question

当屏幕尺寸小于560px时，我已经制作了一个从水平变为垂直的菜单。有人能告诉我现在如何使菜单消失，屏幕尺寸小于560px，并且对于＆＃34; MENU＆＃34;按钮出现，当按下按钮菜单出现打击。 http://ahdecor8.co.uk/menu/如果缩小屏幕尺寸，您就会明白我的意思。我对编码非常陌生，所以请尽可能简单地解释一下:)提前谢谢！

Answer 1

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

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

以下是有关媒体查询的更多信息

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

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

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

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

制作＆＃34;菜单＆＃34;按钮出现在较小的屏幕上

3 个答案: