0

989px (最大画像サイズ) 未満で始まるメディア クエリを使用して、背景画像のブレーク ポイントを作成しました。デバイスごとに異なる画像を使用したいので、画像を表示するために使用していません（もちろん、モバイルデバイスが最大の画像をダウンロードしないように）。(各画像は特定のブレークポイントで定義されます)。早い段階で言っておきますが、これはhttp://www.glorkianwarrior.comで公開されています。

このための css は次のようになります。

.splash {
  max-width: 988px;
  margin:auto;
  height:380px;
}

@media (min-width: 989px) {
   .splash {
       background: url('../images/academy.png') no-repeat;
   }
}

@media (max-width: 989px) and (min-width: 321px) {
   .splash {
       background: url('../images/academy-mid.png') no-repeat;
       max-width: 640px;
       padding: 4px;
       position: relative;
       background-size: 100%;
   }
}

これにより、ページが 988 ピクセル以下 (321 ピクセルまで) になると、スプラッシュ画像が滑らかになります。ブラウザの幅が 640px 未満になるまで、実際には幅/高さは変更されません。.splash の下にネストされているその下のナビゲーション バーで何が起こっても、その場所は変わりません。これは、.splash の高さに接続されているためです。html は次のようになります。

<header class="splashhead">
  <div class="splash">
    <nav class="kochalka">
      <ul>
         <li class="navclass first active"><a href="http://glorkianwarrior.com/" title="Home" >Home</a></li>
         <li class="navclass"><a href="news/" title="News" >News</a></li>
         <li class="navclass"><a href="gallery.html" title="Gallery" >Gallery</a></li>
         <li class="navclass last"><a href="guide.html" title="Guide" >Guide</a></li>
      </ul>
    </nav>
  </div>
</header>

その高さを与えないと消えてしまいます。100% またはページ自体のパーセンテージを指定してみました。親に特定の高さを与えてから、.splash で 100% を実行しようとしましたが、ナビゲーション バーの配置は変わりませんでした。

ブラウザのサイズに基づいてこのナビゲーションのサイズを変更することは可能ですか? ページ上の各画像を独自の div 内で使用し、メディア クエリを使用して、関連のない div に display:none を使用する方法を考え出す必要がありますか?

4

1 に答える 1

2

div 内にラップnavし、巧妙な CSS を使用してアスペクト比を与える必要があります。下記参照 -

これがあなたのコードです：ご覧のとおり、wrapper周りにdivを追加しましたnav

<header class="splashhead">
    <div class="splash">
    <div class="wrapper">
      <nav class="kochalka" style="">
        <ul>
            <li class="navclass first active"><a href="http://glorkianwarrior.com/" title="Home">Home</a></li>
            <li class="navclass"><a href="news/" title="News">News</a></li>
            <li class="navclass"><a href="gallery.html" title="Gallery">Gallery</a></li>
            <li class="navclass last"><a href="guide.html" title="Guide">Guide</a></li>
        </ul>
      </nav>
</div>

  </div></header>

次のスタイルも追加すると、希望どおりに機能します

<style>
.wrapper {
 width: 100%;
 display: inline-block;
 position: relative;

}
.wrapper:after {
    padding-top: 56.25%; /*16:9 ratio*/
    display: block;
    content: '';
}
</style>
于 2013-10-15T19:39:39.900 に答える