Question

我的代码目前是非常重复且非常长，对我来说这不是干净的代码。

在大型设备上时：

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

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

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


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

    });

<ul>内的内容完全相同，因此对于多张图片，代码非常长。

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

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个类;

Answer 2

您可以使用media query在移动屏幕尺寸

上显示滑块时显示滑块

@media only screen and (min-width:50px) and (max-width:500px)仅在屏幕宽度介于50和500 px

之间时才会运行

您可以将它们合并到一个容器中，然后在不同屏幕尺寸之间切换可见性

<div class="container">
    <ul class="ul-class-name">
        <li><img src="" /></li>
    </ul>
    <ul class="imageslider">
        <li><img src="" /></li>
    </ul>
</div>

CSS：

.imageslider {
            display: none;
        }
    @media only screen and (min-width:50px) and (max-width:500px) {
        .imageslider {
            display: block;
        }
        .ul-class-name{
            display:none;
                }
    }

根据设备的大小激活图像幻灯片

2 个答案: