1

在您尝试帮助我之前，请查看我之前的问题，以了解我正在尝试完成的工作HERE

我想调整位于顶部 div（黑条）内的两个 div（徽标和菜单栏，它们都是不同的绿色）的位置和大小。顶部 div 会根据屏幕分辨率自动调整其大小。

单击此处查看示例

你可以看到它是如何black bar转弯blue的under 320 pixels。但是，我只想在黑条变成蓝色时调整两个绿条的位置和大小。我该怎么做？

帮助将不胜感激，谢谢。

4

2 回答 2

2

您可以向媒体查询声明添加更多样式：

@media all and (max-width: 320px) {
.menubar {
  /*/ code for below 320px /*/
  background-color:#00F;
  width:100%;
  height:150px;
    position:relative;
}

#top-nav-bar {
    position:absolute;
    bottom:0px;
    top:auto;
}
#top-logo {
    position:absolute;
    top:0px;
}
}

查看此演示：http: //jsfiddle.net/Rk4mr/7/

还要确保您的媒体查询样式可以在 CSS 的底部声明它。

于 2013-11-10T03:42:41.223 回答
1

您可以将多个元素添加到同一个媒体查询。

@media all and (max-width: 320px) {
    #top-nav-bar{float:right!important;width:80%!important;}
    #top-logo{float:right!important;width:20%!important;}    
    .menubar {
      /*/ code for below 320px /*/
      background-color:#00F;
      width:100%;
      height:150px;
  }
}

看这里。

此外，如果您使用百分比而不是像素，则可以确保元素不会逐行层叠。（例如，如果浏览器的宽度为 280 像素，则两个大于 280 的元素不会放在同一行）

于 2013-11-10T03:38:21.053 回答