基于屏幕宽度的Javascript函数

Question

嘿，当您使用以下尺寸调整屏幕尺寸时，我正在尝试减小砖石结构的列宽：max-width：450px;

var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.box',
    columnWidth: 220,
    isAnimated: !Modernizr.csstransitions,
    isFitWidth: true
  });
});

这是我的Javascript代码。 我要添加什么以使其在该屏幕尺寸下减小列宽？

或者我该如何使用IF语句指定屏幕尺寸...如果屏幕尺寸小于450，则为“ xyz”，否则上述功能...

Answer 1

速记IF语句应该可以解决问题。 本质上，您说的是如果文档宽度小于450且columnWidth设置为220，否则columnWidth设置为110。

var $container = $('#container');
      $container.imagesLoaded(function(){
      $container.masonry({
                          itemSelector : '.box',
                          columnWidth: ( $(document).width() < 450 ? 220 : 110 ),
                          isAnimated: !Modernizr.csstransitions,
                          isFitWidth: true
                        });
       });

Answer 2

if(window.screen.availWidth < 450)
{
    // alternative configuration here
}