Question

如果用户屏幕是＆lt;我想要隐藏浮动div 1024px，因为它将覆盖我的博客内容区域。我在网上发现了这个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

使用media queries。你的CSS代码是：

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

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

我遇到的问题是我的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＆lt; 700）执行以下代码，我做了以下

if (!hasSwitched()) { Your code

}

else{ your code

}

通过这样做，CSS告诉Jquery它达到了700px。所以css和jquery都是同步的......而不是像素差异。请试一试，这绝对不会令人失望。

为了让这个逻辑适用于IE8我使用了Respond.js插件（这也绝对有效）它允许你使用IE8的媒体查询。只有不支持的是视口宽度和视口高度...因此我尝试让我的CSS和JS一起工作。希望这可以帮助你们

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

5 个答案: