브라우저 창 너비를 기준으로 매개 변수를 변경 하시겠습니까?

Question

Masonry으로 화면 또는 브라우저 창의 너비가 1035px 미만으로 줄었을 때 columnWidth을 320으로 변경하려면 다음 코드를 사용하고 있습니다. 화면의 너비가 1035px보다 큰 경우 columnWidth은 240으로 간주됩니다.

그러나 화면의 너비와 관계없이 columnWidth은 320에 머물러 있습니다. 예를 들어, 당신은이 사이트에 블로그에 대해 이야기하고있는 것을 볼 수 있습니다 http://keebs.com/sandbox

전체 화면, 그것은 다음과 같습니다

브라우저가 이하로 아래로 크기를 조정할 때 폭 1035px보다, 그것은 다음과 같습니다

기본적으로, 첫 번째 이미지에 대해, 내가 그렇게 블로그는 전자를 채울 수 3로 열 수를 원하는 공간을 비운다. 열 수를 3으로하려면 columnWidth을 240으로 변경해야합니다.

코드가 있습니다.

if(jQuery().isotope) { 

    $container = jQuery('#masonry'); 

    $container.imagesLoaded(function() { 

     $container.isotope({ 
      itemSelector : '.item', 
      masonry: { 
       columnWidth: $(document).width() > 1035 ? 240 : 320 
      }, 
      getSortData: { 

       order: function($elem) { 
        return parseInt($elem.attr('data-order')); 
       } 

      }, 
      sortBy: 'order' 
     }, function() { 

      // Isotope Chrome Fix 
      setTimeout(function() {   
       jQuery('#masonry').isotope('reLayout'); 
      }, 1000); 

     }); 


    }); 

    // filter items when filter link is clicked 
    $container = jQuery('#masonry'); 

    jQuery('#filter li').click(function(){ 

     jQuery('#filter li').removeClass('active's); 
     jQuery(this).addClass('active'); 

     var selector = jQuery(this).find('a').attr('data-filter'); 

     $container.isotope({ filter: selector }); 

     return false; 

    }); 


} 

Answer 1

CSS에서 반응 형 디자인을 사용하지 않는 이유는 무엇입니까? 벽돌 이벤트에

@media screen and(max-width:700px) 
{ 
    //your css content goes here depending what you wanna show when screen resizes to 700px,this will work good in mobiles also 
}