에티테마

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

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 1,097회 작성일 19-09-18 21:53

본문

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

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>


 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

카테고리

카테고리
 질문답변
팁게시판
 영카트팁
 그누M팁
 자료실

프리미엄

프리미엄

영화예고편

영화예고편

최근이미지리스트

최근이미지리스트