javascript - 媒体查询/RWD-将图像文件更改为480px

Question

我正在使用我正在构建的网站的particleslider.js进行交互式徽标设计。
我正在尝试完成所有媒体查询，并希望将动画徽标替换为平面徽标设计.png文件，以用于在手机和平​​板电脑上查看该网站，因为它显然不适用于这些类型的控制台。
如何将一组规则/文件（CSS / HTML和Javascript）换为全屏（1200px / 960px），换成较小屏幕上的另一套规则/文件？

这是全屏显示的代码-

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.

Answer 1

您可以在CSS中使用背景来完成此操作。

例如：

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

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

我希望它能满足您的需求。