Swap ein Hintergrundbild für Medienabfrage mit Javascript

Question

Ich verwende Vegas Hintergrund Slidehow, und ich möchte das Hintergrundbild tauschen, wenn der Benutzer die Zielseite in einem Smartphone oder Tablet sieht, der Code ist standardmäßig:

$('body').vegas({ 
    delay: 15000, 
    timer: false, 
    transitionDuration: 2000, 
    slides: [ 
     { src: 'img/background/0.jpg' }, 
     { src: 'img/background/1.jpg' }, 
     { src: 'img/background/2.jpg' } 
    ], 
    transition: 'swirlRight', 
    animation: 'kenburns' 
}); 

Wie kann ich einen Javascript-Code schreiben, den das Hintergrundbild in Medienabfrage eintauscht? Vielen Dank!

Answer 1

Sie könnten einen Stil mit dem Kopfelement der Seite wie folgt anhängen:

$('head').append('<style>@media (min-width: 1000px){ .my-style{ background-color: #000; } }</style>'); 

Obwohl durch r00k vor wie erwähnt, für Medien-Anfragen Sie müssen Javascript nicht. Überprüfen Sie einfach die Seite und überprüfen Sie, welchen Code das Slider-Plugin erstellt und personalisieren Sie mit CSS die Folie Elemente. Beste Grüße.

Answer 2

Um ein statisches Hintergrundbild zu erhalten, können Sie nur CSS verwenden, dafür ist kein Javascript erforderlich.

@media(max-width:768px){ 
    .vegas{ 
     background-image:url("/assets/x/y/z"); 
    } 
} 

Diese CSS wird nur auf die Bildschirmgrößen, deren Breite gelten kleiner als oder gleich 768px, die für Tabletten im Allgemeinen Standardgröße ist, können Sie auch min-width-Attribut auf die Medien Abfrage wie folgt definieren.

@media(max-width:768px) and (min-width: 520px){ 
    .vegas{ 
     background-image:url("/assets/x/y/z"); 
    } 
} 

dieses CSS-Styling wird nur Geräte mit einer Breite von mehr anwendbar sein, dann gleich 520px & kleiner als oder gleich 768px. Sie können die Kombination der beiden Dinge verwenden, um das Styling für verschiedene Gerätegrößen zu erzielen.

Prost Vaibhav