Rimuovi elemento per alcune dimensioni dello schermo

Attualmente sto creando un web design reattivo utilizzando le query multimediali. Per i dispositivi mobili voglio rimuovere il mio cursore JS e sostituirlo con qualcos'altro. Ho esaminato lo .remove() e alcune altre cose dalla libreria JQuery, tuttavia queste devono essere implementate nell'HTML e non riesco a pensare a un approccio dall'angolo del css.Rimuovi elemento per alcune dimensioni dello schermo

fonte

2013-07-20 sam_7_h

È possibile nascondere una e lement e mostra un altro a seconda delle dimensioni dello schermo utilizzando la query multimediale da 'css'. –

Non è sicuro al 100% cosa intendi. Ma ho creato una classe "no-mobile" che aggiungo agli elementi che non dovrebbero essere mostrati sui dispositivi mobili. Nella query multimediale ho quindi impostato no-mobile per visualizzare: none ;.

@media screen and (max-width: 480px) { 

     .nomobile { 
      display:none; 
     } 
}

fonte

2013-07-20 12:42:40 user2515479

Hai bisogno di rimuoverli o semplicemente nasconderli? Se solo nascondendo va bene, allora si può combinare media query con display:none:

#mySlider{ 
    display: block; 
} 

@media (max-width: 640px) 
{ 
    #mySlider 
    { 
     display: none; 
    } 
}

fonte

2013-07-20 12:42:53

Dipende dal fatto che nasconderlo continuerebbe a caricare il cursore e le immagini poiché uno dei motivi per cui è stato modificato il cursore, a parte le dimensioni, è quello di creare un elemento più leggero per tempi di caricamento più rapidi. –

Sarà ancora caricato se lo stai nascondendo. – hungerstar

È inoltre possibile utilizzare la funzione jQuery addClass() e removeClass() o removeAttr() per raggiungere il vostro scopo.

Esempio:

$(window).resize(function(){ 
     if(window.innerWidth < 500) { 
      $("#slider").removeAttr("style"); 

     } 
});

Oppure si può anche utilizzare media query come segue:

#mySlider{ 
    display: block; 
} 

@media (max-width: 500px) 
{ 
    #mySlider 
    { 
     display: none; 
    } 
}

fonte

2013-07-20 12:45:13

È possibile nascondere un elemento e mostrare un altro a seconda delle dimensioni dello schermo utilizzando media query da css, questo è da uno dei miei progetti live (lo uso per mostrare/nascondere l'icona)

@media only screen and (max-width: 767px) and (min-width: 480px) 
{ 
    .icon-12{ display:none; } // 12 px 
    .icon-9{ display:inline-block; } // 9px 
}

fonte

2013-07-20 12:45:42

Rimuovi elemento per alcune dimensioni dello schermo

risposta

Problemi correlati