如果屏幕小於特定寬度，則隱藏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();

    }

});

Answer 3

您的代碼的問題似乎是elseif語句， else if （請注意空格），則應為elseif語句。

我重寫並簡化了代碼：

$(document).ready(function () {

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

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

});

Answer 4

我遇到的問題是我的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語句中，我沒有說（hasSwitched <700）是否執行以下代碼，而是執行了以下操作

if (!hasSwitched()) { Your code

}

else{ your code

}

通過這樣做，CSS會告訴Jquery何時達到700px。 所以css和jquery都是同步的...而不是幾個像素的差異。 嘗試嘗試一下，它絕對不會令人失望。

為了使相同的邏輯適用於IE8，我使用了Respond.js插件（該插件也肯定有效），它允許您對IE8使用媒體查詢。 唯一不支持的是視口寬度和視口高度...因此，我嘗試將CS​​S和JS配合使用的理由。 希望這對你們有幫助

Answer 5

在該示例中，如果您的邏輯不是錯誤的方式，那么當屏幕大於1024時，您會將其隱藏。將這些情況相反，將所有內容none放在一個block ，反之亦然。