我有一个带有彩色背景的标题栏,并且其中包含一些右对齐的菜单项。标题栏应拉伸视口的整个宽度,并具有最小宽度,以免收缩到站点主体的(固定)宽度以下。即使标题栏更宽,内部的菜单项也应与站点的主体保持正确对齐。到目前为止很容易: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中工作


有任何想法吗?

最佳答案

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


  媒体查询是一个逻辑表达式,可以为true或false。一种
  如果媒体查询的媒体类型与
  用户代理运行所在设备的媒体类型(定义
  在“适用于”行中),并且媒体查询中的所有表达式都是
  真正。


例:

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


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

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

07-24 09:47
查看更多