使用最小寬度編碼調整瀏覽器大小

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僅當瀏覽器小於767像素而不是像預期的那樣高於767像素時才顯示消息。但是，當您調整瀏覽器大小時，它似乎忽略了'寬度< 767'。如果從小於767開始，它會在您調整大小時隨時記錄消息。當它大於767px時，它從不記錄該消息。有沒有辦法調整大小來觸發寬度爲< 767的代碼？使用最小寬度編碼調整瀏覽器大小

來源

2014-01-10 lxm7

你需要移動調整大小處理程序中的計算

$(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'); 
    }; 
});

來源

2014-01-10 18:17:59

您正在回答這個問題，但沒有正確解決實際問題。這應該使用[CSS媒體查詢]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries?redirectlocale=en-US&redirectslug=CSS%2FMedia_queries）完成，而不是JavaScript。 – kba

你只計算一次的寬度......你需要每一個窗口大小的時間來重新計算：

$(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'); 
    }; 
});

來源

2014-01-10 18:17:26

也可以使用$（window）.resize（function（）{}）; – Jason

您不應該爲此使用JavaScript。你可以用CSS來做到這一點：

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

來源

2014-01-10 20:56:58 kba

使用最小寬度編碼調整瀏覽器大小

回答

相關問題