0

我有一个带有彩色背景的标题栏，里面有一些右对齐的菜单项。标题栏应拉伸视口的整个宽度，并具有最小宽度以避免缩小到站点主体的（固定）宽度以下。即使标题栏扩展得更宽，内部的菜单项也应与网站的主体保持右对齐。到目前为止很容易：http: //jsfiddle.net/symposion/fgrGD/

<div class="headerBar">
  <div class="headerMenu">
    Some item
  </div>
</div>
<div class="mainContent">
</div>

.headerBar {
  margin-top:30px;
  background-color:black;
  color:white;
  min-width:400px;
  padding-top:10px;
  padding-bottom:10px;
}

.headerMenu {
  text-align:right;
  max-width:400px;
  margin-left:auto;
  margin-right:auto;
}

.mainContent {
  width:400px;
  margin-left:auto;
  margin-right:auto;
  background-color:blue;
  height:100px;
}

变得复杂的地方是，当浏览器的大小调整为小于主站点的最小宽度时，我还希望菜单向左移动（同时仍保持与屏幕边缘对齐），以充分利用剩余空间。这样做的天真方法是从标题栏中删除最小宽度，但这显然意味着当您向右滚动时会出现令人讨厌的空白间隙。

约束：

  • 我无法将标题设置为固定高度，它需要根据其内容进行扩展和收缩
  • 没有JS
  • 理想情况下，我想避免标题中出现大量冗余标记；如果这是唯一的方法，我可以忍受一点。
  • 需要在 IE8+、Firefox、Chrome、Safari、iOS 上工作

有任何想法吗？

4

1 回答 1

1

您需要使用称为媒体查询的东西。

媒体查询是一个真或假的逻辑表达式。如果媒体查询的媒体类型与正在运行用户代理的设备的媒体类型匹配（如“适用于”行中定义的那样），则媒体查询为真，并且媒体查询中的所有表达式都为真。

例子：

@media screen and (max-width: 765px) {
    ...styles...
}

jsFiddle：http: //jsfiddle.net/uRaMS/

来源：http ://www.w3.org/TR/css3-mediaqueries/

于 2013-01-30T15:24:36.613 回答