CSS의 @media 방식이아닌 제이쿼리로 브라우저 사이즈를
체크하는 방법 입니다.
반응형 작업시 브라우저의 가로크기에 따라 다른 스크립트를 써야한다거나
CSS로 컨트롤하기 어려운(?) 상황일때 유용한것 같습니다.
[code]
<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>
[/code]
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 11개