제이쿼리로 브라우저 사이즈 체크 > 실행 (반응형) 정보
제이쿼리로 브라우저 사이즈 체크 > 실행 (반응형)
본문
CSS의 @media 방식이아닌 제이쿼리로 브라우저 사이즈를
체크하는 방법 입니다.
반응형 작업시 브라우저의 가로크기에 따라 다른 스크립트를 써야한다거나
CSS로 컨트롤하기 어려운(?) 상황일때 유용한것 같습니다.
<script>
function mediaq(){
var windowWidth = $( window ).width();
if(windowWidth < 768) {
//브라우저의 가로 사이즈가 768px 보다 작을때 실행될 내용
} else {
//브라우저의 가로 사이즈가 768px 보다 클때 실행될 내용
}
}
//mediaq를 setResponsive에 담는다.
function setResponsive() {
mediaq();
}
//브라우저가 로드될때 실행
$(window).on('load', function () {
setResponsive();
});
//브라우저가 리사이즈될때 실행
$(window).on('resize', function () {
setResponsive();
});
</script>
추천
10
10
댓글 11개
파이팅
안녕하세요! ㅎㅎ
감사합니다.
^^
감사합니다.
감사합니다!
감사합니다
^^
감사합니다.
@UtAlvin 댓글 감사합니다~!
감사합니다.