Nascondi elemento div quando la dimensione dello schermo è inferiore a una dimensione specifica

Question

Ho un elemento div che voglio nascondere quando la larghezza del browser è inferiore o uguale a 1026px. E 'possibile farlo con il css: @media only screen and (min-width: 1140px) {} Se non è possibile con css, c'è qualche alternativa?

Ulteriori informazioni: Quando l'elemento div è nascosto, non voglio uno spazio vuoto bianco. Mi piacerebbe che la pagina scorresse come se eliminassi completamente l'elemento div dal codice.

Il div che mi nascondo è <div id="fadeshow1"></div>.

HTML5 Doctype.

Ho usato javascript per posizionare una galleria in quel div.


voglio farlo sembrare come questo, quando è più grande di 1026px Larghezza:

voglio farlo sembrare come questo, quando è inferiore a 1026px Larghezza:

Answer 1

Si può fare questo con i CSS:

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

Stiamo usando max-width, perché vogliamo fare un'eccezione al default CSS, quando uno schermo è più piccolo rispetto al 1026px. min-width renderebbe il conteggio delle regole CSS per tutte le schermate di larghezza pari o superiore a 1026 px.

Qualcosa da tenere a mente è che le query @media non sono supportate su IE8 e inferiori.

Answer 2

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

Ogni volta che lo schermo è inferiore a 1026 pixel s largo, si applica qualsiasi cosa all'interno di { }.

Some browsers don't support media queries. È possibile aggirare questo utilizzando una libreria javascript come Respond.JS

Answer 3

@ media solo dello schermo e (min-width: 1140px) dovrebbe fare il suo lavoro, ci mostrano il file css

Answer 4

Questo dovrebbe aiutare:

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

768 px dovrebbe essere sufficiente come pure

Answer 5

L'approccio più semplice che io conosca sta usando onResize() func:

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

Here is a fiddle for it

Answer 6

Non so su CSS, ma questo codice Javascript dovrebbe funzionare:

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

Devi usare max-width, invece di min-width.

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

Answer 8

È sufficiente utilizzare una query multimediale in CSS per ottenere ciò.

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

Purtroppo alcuni browser non supportano @media (guardando a voi IE8 e sotto). In questi casi, hai alcune opzioni, ma il più comune è Respond.js che è un polyfill leggero per le query media CSS3 min/max.

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

Ciò consentirà al vostro design reattivo di funzionare in quelle vecchie versioni di IE.
*reference

Answer 9

se si utilizza il bootstrap si può semplicemente utilizzare il hidden-sm (lg o md o xs) a seconda di ciò che si desidera. Puoi quindi andare nel file css e specificare le percentuali che vuoi mostrare. nell'esempio qui sotto si nasconderà su schermi di grandi dimensioni, quelli medi e quelli più piccoli ma mostrerà su schermi piccoli prendendo la metà dello schermo.

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