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

メディアクエリと呼ばれるものを使用する必要があります。

メディアクエリは、trueまたはfalseのいずれかの論理式です。メディアクエリのメディアタイプが、ユーザーエージェントが実行されているデバイスのメディアタイプと一致し（[適用先]行で定義）、メディアクエリのすべての式が真である場合、メディアクエリは真です。

例：

@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 に答える