jquery - HTML5/CSS3 + BxSlider - 不同分辨率的小或大图像的媒体查询

Question

建立响应式网站。基本上，我想为我的 BxSlider 设置两组图像——一组用于显示特定窗口大小，另一组用于显示大于该大小的任何内容。我已经尝试过这些方法，但是 BxSlider 不能在状态之间平滑过渡（我也没有真正期望它）：

    <ul class="bxslider">

        <li class="display_below_size"><img src="/img/image1.jpg" /></li>

        <li class"display_above_size"><img src="/img/image2.jpg" /></li>

    </ul>

.display_below_size {
    display:block;
}


.display_above_size {
    display:none;
}

@media only screen and (min-width: 1300px) {

.display_below_size {
    display:none;
}


.display_above_size {
    display:block;
}

}

你认为我应该写一些javascript来解决这个问题，还是有办法用css来做？

提前致谢！