55

ブラウザの幅が 1026px 以下の場合に非表示にしたい div 要素があります。これは css で可能ですか: @media only screen and (min-width: 1140px) {} css で不可能な場合、代替手段はありますか?

追加情報: div 要素が非表示の場合、空白の白いギャップは必要ありません。コードから div 要素を完全に削除した場合と同じようにページが流れるようにしたいと思います。

私が隠しているdivは<div id="fadeshow1"></div>.

HTML5 ドックタイプ。

JavaScript を使用してギャラリーをその div に配置しました。


幅が 1026px より大きい場合は、次のように表示します。 http://i.stack.imgur.com/REBPi.png


幅が 1026px 未満の場合は、次のように表示します。 http://i.stack.imgur.com/XdiL4.png

4

9 に答える 9

151

CSS でこれを行うことができます。

@media only screen and (max-width: 1026px) {
    #fadeshow1 {
        display: none;
    }
}

画面が1026px より小さいmax-width場合、CSS に例外を作りたいので、 を使用しています。幅1026 ピクセル以上のすべての画面で CSS ルールがカウントされます。min-width

覚えておくべきことは、@mediaクエリは IE8 以前ではサポートされていないということです。

于 2012-11-20T15:19:16.077 に答える
22 
@media only screen and (max-width: 1026px) { 
  #fadeshow1 { 
    display: none; 
  } 
}

画面の幅が 1026 ピクセル未満の場合は常に、 内のすべて{ }が適用されます。

一部のブラウザーは、メディア クエリをサポートしていません。Respond.JSのような JavaScript ライブラリを使用して、これを回避できます。

于 2012-11-20T15:19:14.247 に答える
10

ブートストラップを使用している場合は、必要に応じて hidden-sm (lg または md または xs) を使用できます。css ファイルに移動して、表示するパーセンテージを指定できます。以下のサンプルでは、​​大画面、中画面、極小画面では非表示になりますが、画面の半分を占める小さな画面では表示されます。

<div class="col-sm-12 hidden-lg hidden-md hidden-xs">what ever you want</div>
于 2017-03-29T11:06:52.693 に答える
7

CSSについてはわかりませんが、このJavascriptコードは機能するはずです:

    function getBrowserSize(){
       var w, h;

         if(typeof window.innerWidth != 'undefined')
         {
          w = window.innerWidth; //other browsers
          h = window.innerHeight;
         } 
         else if(typeof document.documentElement != 'undefined' && typeof      document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) 
         {
          w =  document.documentElement.clientWidth; //IE
          h = document.documentElement.clientHeight;
         }
         else{
          w = document.body.clientWidth; //IE
          h = document.body.clientHeight;
         }
       return {'width':w, 'height': h};
}

if(parseInt(getBrowserSize().width) < 1026){
 document.getElementById("fadeshow1").style.display = "none";
}
于 2012-11-20T15:27:18.573 に答える
3

これを実現するには、CSS でメディア クエリを使用するだけです。

@media (max-width: 1026px) {
    #fadeshow1 { display: none; }
}

残念ながら、一部のブラウザーはサポートしていません@media(IE8 以下を見てください)。そのような場合、いくつかのオプションがありますが、最も一般的なのは、最小/最大幅の CSS3 メディア クエリ用の軽量ポリフィルである Respond.js です。

<!--[if lt IE 9]>
    <script src="respond.min.js"></script>
<![endif]-->

これにより、古いバージョンの IE でレスポンシブ デザインを機能させることができます。
*参照

于 2014-12-16T14:26:27.377 に答える
1

min-width の代わりに max-width を使用する必要があります。

<style>
    @media (max-width: 1026px) {
        #test {
            display: none;
        }
    }
</style>
<div id="test">
    <h1>Test</h1>
</div>
于 2014-12-15T15:31:41.937 に答える
1 
@media only screen and (min-width: 1140px)

cssファイルを見せてください

于 2012-11-20T15:19:30.067 に答える
1

これは役立つはずです：

if(screen.width<1026){//get the screen width
   //get element form document
   elem.style.display == 'none'//toggle visibility
}

768ピクセルでも十分です

于 2012-11-20T15:25:05.607 に答える
0

私が知っている最も簡単な方法は、onresize() 関数を使用することです。

   window.onresize = function(event) {
        ...
    }

ここにフィドルがあります

于 2012-11-20T15:25:53.767 に答える