javascript - 根据设备的大小激活图像 slider

Question

我现在的代码非常重复而且很长，对我来说这不是干净的代码。

在大型设备上:

<div class="hidden-xs">
    <ul class="ul-class-name">
        <li><img src="" /></li>
    </ul>
</div>

当你移动到小屏幕/设备时，我实现了一个使用 JavaScript 启动的 jQuery 图像 slider :

<div class="visible-xs">
    <ul class="imageslider">
        <li><img src="" /></li>
    </ul>
</div>


$(document).ready(function(){   
    $('.imageslider').bxSlider({

    });

<ul>里面的内容完全一样，所以多张图片代码很长。

如何使用一行代码将图像 slider 仅针对移动/xs 设备激活以将它们组合在一起 <ul class="ul-class-name imageslider"> ？我想将两者合并在一起以节省大量代码。

Answer 1

将其添加到您的 CSS 代码中:

@media screen and (min-width:761px){
     .imageslider{ visibility:hidden; 
}

@media screen and (max-width:760px){
      .imageslider{ visibility:hidden;
}

@media screen and (max-width:480px){
     .imageslider{ visibility:visible;
}

@media screen and (max-width:360px){
        .imageslider{ visibility:visible;
    }

是的，这是正确的方法，您可以通过添加空格来使用 n 个类；