删除某些屏幕尺寸的元素答案

【问题标题】：Remove element for certain screen sizes删除某些屏幕尺寸的元素
【发布时间】：2013-07-19 16:46:53
【问题描述】：

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

【问题讨论】：

您可以使用来自css的媒体查询隐藏一个元素并根据屏幕大小显示另一个元素。

标签： css html media-queries

【解决方案1】：

您需要删除它们，还是只是隐藏它们？如果只是隐藏没问题，那么您可以将媒体查询与display:none结合起来：

#mySlider{
    display: block;
}

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

【讨论】：

取决于隐藏它是否仍会加载滑块和图像作为更改滑块的原因之一，而不是由于它的大小是为了创建更轻的元素以加快移动加载时间。
如果你隐藏它，它仍然会加载。

【解决方案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
}

【讨论】：

【解决方案3】：

不是 100% 确定您的意思。但是我创建了一个“非移动”类，我将它添加到不应在移动设备上显示的元素中。在媒体查询中，我将 no-mobile 设置为 display: none;。

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

        .nomobile {
            display:none;
        }
}

【讨论】：

【解决方案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;
    }
}

【讨论】：

我认为使用 display 属性并不理想，它隐藏了 DOM 元素，但仍将其保留在页面上。这使得 DOM 变脏，隐藏了从未使用过的元素。是否决定为 destops 和移动设备使用不同的 DOM 结构？换句话说，我们能否区分设备类型，而不是在 css 级别，而是在 html-js 级别？