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

您需要使用称为媒体查询的内容。

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

示例：

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

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

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

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

1 个答案: