web-dev-qa-db-ja.com

画面サイズが特定のサイズより小さい場合、div要素を非表示にします

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

追加情報：div要素が非表示の場合、空白の空白は必要ありません。コードからdiv要素を完全に削除した場合のように、ページをフローさせたいです。

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

HTML5 Doctype。

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


幅が1026pxより大きい場合、このように表示したい：http://i.stack.imgur.com/REBPi.png


幅が1026px未満の場合、このように見えるようにしたい：http://i.stack.imgur.com/XdiL4.png

javascripthtmlcsshtml5css3
38
Brett Merrifield

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

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

画面が1026pxよりも小さいの場合、CSSに例外を作成するため、max-widthを使用しています。 min-widthは、幅1026pxおよびlargerのすべての画面のCSSルールをカウントします。

留意すべきことは、@mediaクエリはIE8以前ではサポートされていないことです。

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

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

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

15
Andy

bootstrap u下のサンプルでは、​​大きな画面、中程度の画面、余分な小さな画面に隠れていますが、画面の半分を撮って小さな画面に表示しています。

<div class="col-sm-12 hidden-lg hidden-md hidden-xs">what ever you want</div>
6
Kabengwa Patrick

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";
}
5
NaijaProgrammer

これを行うには、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の古いバージョンで機能するようになります。
* reference

2
JRulle

これは役立つはずです：

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

768ピクセルでも十分です

1
vaibhav

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

<style>
    @media (max-width: 1026px) {
        #test {
            display: none;
        }
    }
</style>
<div id="test">
    <h1>Test</h1>
</div>
0
user4051844

私が知っている最も簡単なアプローチは、onresize（）funcを使用することです：

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

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

0
TNCodeMonkey

@mediaのみの画面と（最小幅：1140px）彼の仕事をして、cssファイルを見せてください

0
Mirco