div-Element ausblenden, wenn die Bildschirmgröße kleiner als eine bestimmte Größe ist

Question

Ich habe ein div-Element, das ich ausblenden möchte, wenn die Breite des Browsers kleiner oder gleich 1026px ist. Ist dies möglich mit der CSS: @media only screen and (min-width: 1140px) {} Wenn es nicht möglich ist mit CSS, Gibt es eine Alternative?

Extra info: Wenn das div-Element ausgeblendet ist, möchte ich keine leere weiße Lücke. Ich möchte, dass die Seite so fließt, als würde ich das div-Element vollständig aus dem Code löschen.

Das div, das ich verstecke, ist <div id="fadeshow1"></div>.

HTML5 Doctype.

Ich habe JavaScript verwendet, um eine Galerie in dieses div zu platzieren.


Ich mag es so aussehen, wenn es größer als 1026px Breite:

Ich will es so aussehen, wenn es weniger als 1026px Breite:

Answer 1

Sie können dies tun mit CSS:

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

Wir verwenden max-width, weil wir eine Ausnahme von der Standard machen wollen CSS, wenn ein Bildschirm kleiner als der 1026px ist. min-width würde die CSS-Regel für alle Bildschirme mit 1026px Breite und größer zählen.

Etwas zu beachten ist, dass @media Abfragen nicht auf IE8 und niedriger unterstützt werden.

Answer 2

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

Immer wenn der Bildschirm weniger als 1026 Pixel ist s breit, wird alles innerhalb der { } gelten.

Some browsers don't support media queries. Sie können diese Runde erhalten eine Javascript-Bibliothek wie Respond.JS

Answer 3

@media nur Bildschirm und (min-width: 1140px) seine Arbeit tun sollten, zeigen uns Ihre CSS-Datei

Answer 4

Dies sollte helfen:

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

768 px auch genug sein sollte,

Answer 5

der einfachste Ansatz, den ich kenne, ist mit onresize() func:

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

Here is a fiddle for it

Answer 6

Ich weiß nicht, über CSS, aber dieser Javascript-Code sollte funktionieren:

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

Answer 7

Sie haben max-width verwenden anstelle von min-width.

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

Answer 8

Sie müssen einfach eine Medienabfrage in CSS verwenden, um dies zu erreichen.

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

Leider einige Browser nicht @media (und unten betrachtet Sie IE8) unterstützen. In diesen Fällen haben Sie einige Optionen, am häufigsten ist jedoch Respond.js, ein leichtgewichtiger Polyfill für minimale/maximale Breite von CSS3-Medienabfragen.

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

Dadurch kann Ihr Responsive Design in diesen alten Versionen von IE funktionieren.
*reference

Answer 9

Wenn Sie Bootstrap verwenden, können Sie einfach die versteckte sm (lg oder md oder xs) verwenden, je nachdem, was Sie wollen. Sie können dann in die CSS-Datei gehen und die Prozentsätze angeben, die angezeigt werden sollen. Im Beispiel unten wird es auf großen Bildschirmen versteckt, mittlere und extra kleine, aber auf kleinen Bildschirmen, indem die Hälfte des Bildschirms genommen wird.

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