使用最小寬度條件調整瀏覽器大小

Question

    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

    $(window).on("resize", function(){
        if(width < 767 ){
            console.log('narrow');
            $('.col-xs-6.col-sm-3.thumbnail.promo:eq(2)').css('margin-left', '0px');
        };
    });

以下代碼console.logs僅在瀏覽器小於767px時記錄消息，而不是在預期的767px以上時記錄消息。 但是當您調整瀏覽器大小時，似乎忽略了“width <767”。 如果您從小於767開始，它會在您調整大小時隨時記錄消息。 當它大於767px時，它從不記錄消息。 有沒有辦法讓resize觸發在寬度<767內運行的代碼？

Answer 1

你只計算一次寬度......你需要在每次調整窗口大小時重新計算它：

$(window).on("resize", function(){
    if($(window).width() < 767 ){
        console.log('narrow');
        $('.col-xs-6.col-sm-3.thumbnail.promo:eq(2)').css('margin-left', '0px');
    };
});

Answer 2

你需要在resize處理程序中移動計算

$(window).on("resize", function(){
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if(width < 767 ){
        console.log('narrow');
        $('.col-xs-6.col-sm-3.thumbnail.promo:eq(2)').css('margin-left', '0px');
    };
});

Answer 3

你不應該為此使用JavaScript。 你只能用CSS做到這一點：

@media (max-width: 766px) {
  .col-xs-6.col-sm-3.thumbnail.promo:eq(2) {
    margin-left: 0;
  }
}