Question

我目前正在使用媒体查询创建响应式网页设计。对于移动设备，我想删除我的JS滑块并将其替换为其他东西。我查看了.remove()以及JQuery库中的一些其他内容，但是这些必须在HTML中实现，我无法从css角度考虑解决方法。

Answer 1

你需要删除它们，还是只是隐藏它们？如果只是隐藏就可以了，那么您可以将媒体查询与display:none：

结合起来

#mySlider{
    display: block;
}

@media (max-width: 640px) 
{
    #mySlider
    {
        display: none;
    }
}

Answer 2

您可以使用来自css的媒体查询隐藏元素并根据屏幕大小显示另一个元素，这来自我的一个实时项目（我用它来显示/隐藏图标）

@media only screen and (max-width: 767px) and (min-width: 480px)
{
    .icon-12{ display:none; } // 12 px
    .icon-9{ display:inline-block; }  // 9px
}

Answer 3

不是100％肯定你的意思。但我创建了一个“无移动”类，我添加到不应该在移动设备上显示的元素。在媒体查询中，我将no-mobile设置为display：none;。

@media screen and (max-width: 480px) {

        .nomobile {
            display:none;
        }
}

Answer 4

您还可以使用jquery函数 addClass（）和 removeClass（）或removeAttr()来实现您的目的。

示例：

$(window).resize(function(){
        if(window.innerWidth < 500) {
            $("#slider").removeAttr("style");

        }
});

或者您也可以使用媒体查询，如下所示：

#mySlider{
    display: block;
}

@media (max-width: 500px) 
{
    #mySlider
    {
        display: none;
    }
}

删除某些屏幕尺寸的元素

4 个答案: