jquery - 如果屏幕小于一定宽度则隐藏 div

Question

如果用户屏幕 < 1024px，我想隐藏 float 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();
}
});

如果我的 float 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;
    }
}