使用最小宽度编码调整浏览器大小

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

使用最小宽度编码调整浏览器大小

回答

相关问题