Wie div in responsive HTML zu entfernen oder zu verstecken

Question

Ich habe einen Container, der auf der Desktop-Version 4 Bilder inline (enthält 4 divs), aber wie man eine von ihnen oder zwei entfernt, weil ich 3 Bilder inline auf dem Tablet zeigen möchte Version und 2 Bilder auf der mobilen Version.

Kann ich diese Divs (Bilder) in Medienabfragen löschen oder irgendwie ausblenden? Oder wie man diese Bilder hinzufügt, wenn ich mit der ersten mobilen Entwicklung anfange.

Vielen Dank im Voraus.

Answer 1

Versuchen Sie, diese Frage der Medien mit n-Kind-Eigenschaft

/* Smartphones ----------- */ 
@media only screen and (max-width : 767px) { 
    .ur_class:nth-child(3), 
    .ur_class:nth-child(4) { 
     display: none; 
    } 
} 

/* Tab ----------- */ 
@media only screen and (max-width : 991px) and (min-width : 768px) { 
    .ur_class:nth-child(4) { 
     display: none; 
    } 
} 

Answer 2

Geben Sie die Bilder, die Sie auf mobilen einem entsprechenden Klassennamen verbergen wollen, wie hide-on-mobile-portrait, und geben Sie es display: none in einer Medienabfrage Targeting mobile Geräte.

So:

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
    .hide-on-mobile-portrait { 
     display: none; 
    } 
} 

Sie können mehr nehmen Medien-Anfragen von hier: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/