如果屏幕小于某个宽度，则隐藏 div

Posted 2023-02-21

【中文标题】如果屏幕小于某个宽度，则隐藏 div

【英文标题】：Hide div if screen is smaller than a certain width

【发布时间】：2011-05-16 19:27:49

【问题描述】：

如果用户屏幕小于 1024 像素，我想隐藏一个浮动 div，因为它会覆盖我的博客内容区域。我在网上找到了这个 jQuery，但我不知道如何使用它。

$(document).ready(function() 

if ((screen.width>1024)) 
    // if screen size is 1025px wide or larger
    $(".yourClass").css('display', 'none'); // you can also use $(".yourClass").hide();

elseif ((screen.width<=1024))  
    // if screen size width is less than 1024px
    $(".yourClass").css('display', 'block'); // here you can also use show();

);

如果我的浮动 div 类名是 sharecontent，我应该像下面这样替换上面的脚本吗？如果是，则它不起作用。

$(document).ready(function() 

if ((screen.width>1024)) 
    // if screen size is 1025px wide or larger
    $(".sharecontent").css('display', 'none'); // you can also use $(".yourClass").hide();

elseif ((screen.width<=1024))  
    // if screen size width is less than 1024px
    $(".sharecontent").css('display', 'block'); // here you can also use show();

);

我也尝试用 window.width 替换 screen.width 但仍然没有成功:(

【问题讨论】：

不要使用 javascript 来解决非 Javascript 问题。更好地修复 CSS

不管怎样，我的屏幕尺寸为什么重要？我的浏览器窗口可能没有全屏显示

Gareth 提出了一个重要的观点，你应该看看窗口的宽度，而不是真正的屏幕。

【参考方案1】：

我遇到的问题是我的 css 媒体查询和我在 Jquery 中的 IF 语句发生冲突。它们都设置为 700px，但有人会认为它比另一个先达到 700px。

为了解决这个问题，我在我的 html 顶部（在我的主容器之外）创建了一个空的 Div

<div id="max-width"></div>

在 css 中我将此 div 设置为不显示

 #max-width 
        display: none;
    

在我的JS中创建了一个函数

var hasSwitched = function () 
    var maxWidth = parseInt($('#max-width').css('max-width'), 10);
    return !isNaN(maxWidth);
;

所以在我的 IF 语句中，我没有说 if (hasSwitched

if (!hasSwitched())  Your code



else your code

通过这样做，CSS 会告诉 Jquery 何时达到 700 像素。所以 css 和 jquery 都是同步的......而不是有几个像素的差异。试试看吧，绝对不会让人失望的。

为了让相同的逻辑适用于 IE8，我使用了 Respond.js 插件（它也确实有效）它允许您对 IE8 使用媒体查询。唯一不支持的是视口宽度和视口高度......因此我有理由尝试让我的 css 和 JS 一起工作。希望对大家有帮助

【参考方案2】：

我的情况和你差不多；如果屏幕宽度小于我指定的宽度，它应该隐藏 div。这是我使用的适用于我的 jquery 代码。

$(window).resize(function() 

  if ($(this).width() < 1024) 

    $('.divIWantedToHide').hide();

   else 

    $('.divIWantedToHide').show();

    

);

【讨论】：

谢谢，我把.resize从here换成了.width

@stom：如果将 resize() 替换为 width() 它将改变行为 - 隐藏的东西在重新加载之前不会重新出现。除非你想要它，否则它不是最好的解决方案。

【参考方案3】：

您的代码的问题似乎是 elseif 语句，它应该是 else if（注意空格）。

我重写并简化了代码：

$(document).ready(function () 

    if (screen.width < 1024) 
        $(".yourClass").hide();
    
    else 

        $(".yourClass").show();
    

);

【参考方案4】：

在该示例中，您的逻辑是否以错误的方式舍入，当屏幕大于 1024 时您将其隐藏。颠倒大小写，将 none 变为 block，反之亦然。

【参考方案5】：

使用media queries。您的 CSS 代码将是：

@media screen and (max-width: 1024px) 
    .yourClass 
        display: none !important;
    

【讨论】：

据我所知，浏览器对媒体查询的支持还不完整。我认为IE9有支持，但不支持IE8是吗？

@Orbling：正确，不幸的是