CSS - 将块与视口边缘右对齐，但有限制

Question

我有一个带有彩色背景的标题栏和一些右对齐的菜单项。标题栏应拉伸视口的整个宽度，并具有最小宽度以避免缩小到站点主体的（固定）宽度以下。即使标题栏扩展得更宽，内部的菜单项也应与网站的主体保持右对齐。到目前为止一切顺利：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 中工作

有什么想法吗？

Answer 1

您需要使用媒体查询。

媒体查询是一个逻辑表达式，它要么是真要么是假。一种 如果媒体查询的媒体类型与 运行用户代理的设备的媒体类型（定义为 在“适用于”行），媒体查询中的所有表达式都是 真的。

示例：

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

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

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