webentwicklung-frage-antwort-db.com.de

Element für bestimmte Bildschirmgrößen entfernen

Ich erstelle derzeit ein responsives Webdesign 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 angesehen, diese müssen jedoch in HTML implementiert werden und ich kann mir keine Umgehung aus dem CSS-Bereich vorstellen.

htmlcsshtml5media-queries
13
sam_7_h

Müssen Sie sie entfernen oder einfach ausblenden? Wenn nur das Ausblenden in Ordnung ist, können Sie Medienabfragen mit display:none kombinieren:

#mySlider{
    display: block;
}

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

Sie können ein Element ausblenden und je nach Bildschirmgröße ein anderes anzeigen, indem Sie die Medienabfrage von css verwenden. Dies ist aus einem meiner Live-Projekte.

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

Nicht 100% sicher, was du meinst. Ich habe jedoch eine Klasse "no-mobile" erstellt, die ich zu Elementen hinzufüge, die auf mobilen Geräten nicht angezeigt werden sollen. In der Medienabfrage habe ich dann eingestellt, dass no-mobile angezeigt wird: none ;. 

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

        .nomobile {
            display:none;
        }
}
2
user2515479

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

Beispiel:

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

        }
});

Oder Sie können die Medienabfrage auch wie folgt verwenden:

#mySlider{
    display: block;
}

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