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

Question

如果用户屏幕<1024px,我想要隐藏浮动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代码是:

@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();

    }

});