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以上时记录消息。但它似乎忽略了'宽度＆lt; 767'当您调整浏览器大小时。如果您从小于767开始，它会在您调整大小时随时记录消息。当它大于767px时，它从不记录消息。有没有办法让resize触发在宽度内运行的代码＆lt; 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

您需要在调整大小处理程序中移动计算

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

使用最小宽度条件调整浏览器大小

3 个答案: