Media Queries / RWD - Ändern einer Bilddatei für 480px - Javascript, HTML, CSS, Responsive-Design, Medien-Abfragen

Ich habe ein interaktives Logo-Design mitPartikellider.js für eine Website, die ich baue. Ich versuche alle Medienanfragen abzuschließen und möchte das animierte Logo gegen eine flache .png-Datei mit Logo-Design austauschen, wenn die Website auf Mobilgeräten und Tablets angezeigt wird, da diese Konsole offensichtlich nicht funktioniert. Wie tausche ich einen Satz Regeln / Dateien (CSS / HTML & Javascript) gegen Vollbild (1200px / 960px) gegen einen anderen Satz auf kleineren Bildschirmen aus?

Hier "s der Code für Vollbild -

index.html

<div id="particle-slider">
<div class="slides">
<div class="slide" data-src="havoc_logohight.png"></div>
</div>
<canvas class="draw" style="width: 100%; height: 100%;"></canvas>
</div>

<script type="text/javascript">
var ps = new ParticleSlider({ "width":"1000", "height": "500" });
</script>

style.css

#particle-slider  {

margin: 0;
background-color: #fff;


}

ps.js

// Javascript code for particle slider animation goes here.

Antworten:

Sie können dies mit Hintergrund in CSS tun.

Beispielsweise:

#logo {
background-image: url("big_logo.png");
}

@media (max-width: 480px) {
#logo {
background-image: url("small_logo.png");
}
}

Ich hoffe es funktioniert für was du willst.