부트스트랩을 사용하지 않을 경우 브라우저 크기에 따라 반응형사용하기

가끔 부트스트랩이나 미디어쿼리를 사용하지 못하는경우
꼼수입니다.

1.현재 브라우저 값을 알아야 현재 브라우저에 대응해 보여주고
2.브라우저 사이즈의 감지를 통해서 반응형으로 작업하기

아래는 그누보드 5.3 css의 예제 입니다.
아래 예제에서 보시면 아시겠지만
누가 이미 col-gn-2, col-ng-3, col-gn4 이렇게 만들어놨습니다.
이걸 부트스트랩으로 변경하려면 작업이 많기때문에 기존에
있는 값을 가지고 간단히 클래스를 추가 삭제하여 처리하도록 했습니다.
꼼수를 이용한 시간없을때 사용하는 방법 입니다.

더 좋은 팁 있으시면 코멘트에 공유 부탁드립니다.
본 게시물로 이동시키도록 할께요~

 

<script>
// 현재 브라우저 시작하자마자 감지하여 브라우저에 맞게 클래스 추가 및 삭제

$(function(){

var wns = $( window ).width();

if(wns <= 989) {

$(".gall_li").removeClass('col-gn-4');

$(".gall_li").addClass('col-gn-2');

}else{

$(".gall_li").removeClass('col-gn-2');

$(".gall_li").addClass('col-gn-4');

}

});

// 브라우저 사이즈 조절시에 클래스 추가 및 삭제

$(window).resize(function (){

var windowWidth = window.outerWidth;

  if (windowWidth <= 989) {

$(".gall_li").removeClass('col-gn-4');

$(".gall_li").addClass('col-gn-2');

}else{

$(".gall_li").removeClass('col-gn-2');

$(".gall_li").addClass('col-gn-4');

}

});

</script>