删除某些屏幕尺寸的元素

Posted 2023-03-06

【中文标题】删除某些屏幕尺寸的元素

【英文标题】：Remove element for certain screen sizes

【发布时间】：2013-07-19 16:46:53

【问题描述】：

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

【问题讨论】：

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

【参考方案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 级别？