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

Question

如果用户屏幕小于 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 但仍然没有成功:(

Answer 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 一起工作。希望对大家有帮助

Answer 2

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

$(window).resize(function() {

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

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

  } else {

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

    }

});

Answer 3

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

我重写并简化了代码：

$(document).ready(function () {

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

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

});

Answer 4

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

Answer 5

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

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