Question

我使用particlelider.js为我正在建立的网站设计了一个交互式徽标设计。我正在尝试完成所有媒体查询，并希望将动画徽标交换为平面徽标设计.png文件，以便在移动设备和平板电脑上查看网站，因为它显然无法在这些类型的控制台上运行。如何将一组规则/文件（CSS / HTML＆amp; 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");
    }
}

我希望它适用于你想要的东西。

媒体查询/ RWD - 更改480px的图像文件

1 个答案: