css - 删除某些屏幕尺寸的元素

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”类，我将它添加到不应在移动设备上显示的元素中。在媒体查询中，我将 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;
    }
}