0

メディアタグが機能する方法と同様に、div のサイズに基づいてコンテンツを非表示/表示する div をターゲットにする方法を誰もが知っています。

例

<div class="wrapper">

  <div class="holder">
    <div class="nav visible-nav"></div>
    <div class="content"></div>
  </div>

  <div class="holder">
    <div class="nav visible-nav"></div>
    <div class="content"></div>
  </div>
</div>

.wrapper{width:100%;}
.holder{width:50%;float:left;}
.holder{width:50%;float:right;}

メディアタグを使用して、次のようにターゲットにすることができます:

    @media only screen and (max-width:1200px){ 
        .visible-nav{
            display:none;
        }
    }

画面全体ではなくdivをターゲットにする方法はありますか??

4

1 に答える 1

0

エレガントではありませんが、可能な解決策は、使用したのと同じコードを使用することですが、.holderdiv を非表示にするのに十分なほど小さい画面幅で div を計算すること.visible-navです。

たとえば、50%.holderであるため、400px よりも狭いときにそれらを非表示にしたい場合:.holder

@media only screen and (max-width:800px){ 
    .visible-nav{
        display:none;
    }
}

純粋な CSS ではない別の方法は、JS または jQuery を使用して条件を適用することです。

于 2012-11-15T13:24:45.840 に答える