Element für bestimmte Bildschirmgrößen entfernen

Ich erstelle derzeit ein Responsive-Web-Design mit Medienabfragen. Für mobile Geräte möchte ich meinen JS-Slider entfernen und durch etwas anderes ersetzen. Ich habe mir .remove() und ein paar andere Dinge aus der JQuery-Bibliothek angeschaut, diese müssen jedoch in den HTML-Code implementiert werden und ich kann mir keine Arbeit aus dem Css-Winkel vorstellen.Element für bestimmte Bildschirmgrößen entfernen

Quelle

2013-07-20 sam_7_h

Sie können ein e und zeigen Sie eine andere abhängig von der Bildschirmgröße mit Medienabfrage von 'css'. –

Nicht 100% sicher, was Sie meinen. Aber ich habe eine Klasse "no-mobile" erstellt, die ich Elementen hinzufüge, die auf Mobilgeräten nicht angezeigt werden sollen. In der Medienabfrage habe ich dann no-mobile zur Anzeige gestellt: none ;.

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

     .nomobile { 
      display:none; 
     } 
}

Quelle

2013-07-20 12:42:40 user2515479

Müssen Sie sie entfernen oder einfach verstecken? Wenn nur versteckt in Ordnung ist, dann können Sie Medienanfragen mit display:none kombinieren:

#mySlider{ 
    display: block; 
} 

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

Quelle

2013-07-20 12:42:53

Hängt davon ab, ob das Ausblenden den Schieberegler und die Bilder immer noch lädt, da einer der Gründe für das Ändern des Schiebereglers aufgrund seiner Größe darin besteht, ein leichteres Element für schnellere mobile Ladezeiten zu erstellen. –

Es wird immer noch geladen, wenn Sie es ausblenden. – hungerstar

Sie auch Jquery Funktion addClass() und removeClass() oder removeAttr() zu erfüllen Ihren Zweck verwenden können.

Beispiel:

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

     } 
});

Oder Sie auch Medien-Abfrage wie folgt verwendet werden:

#mySlider{ 
    display: block; 
} 

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

Quelle

2013-07-20 12:45:13

Sie ein Element verstecken und zeigen eine andere auf Bildschirmgröße abhängig Medienabfrage von css verwenden, ist dies von einem meiner Live-Projekte (ich benutze dies zum Anzeigen/Ausblenden des Symbols)

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

Quelle

2013-07-20 12:45:42

Element für bestimmte Bildschirmgrößen entfernen

Antwort

Verwandte Themen