CSS 미디어쿼리는 화면의 스타일만을 다루기 때문에, 스크린 크기에 따라 다른 자바스크립트를 적용하는데 한계가 있습니다.
이러한 한계를 극복하게 도와주는 것이 바로 enquire.js 입니다.
이 다음 부분부터는 한가하시면 읽어보세요. :)
자바스크립트 적용에 한계 때문에 처음에 생각해보고, TopSchool 님이 다듬어주신 방법이
스크린 크기가 변경될 때 자바스크립트에서 이벤트핸들러나 클래스를 바꿔치기 해주는 방식입니다.
나중에 알고 보니 거의 일반적으로 쓰이는 방법이더군요.
간단하게 예를 들자면
--- php
기기 감지하는 변수가 이미 선언되어 있고 ($is_mobile)
if ($is_mobile) $event_handler = 'click focus';
else $event_handler = 'mouseover focus';
--- jquery
$(window).resize(function(){
if ($(window).width() == '320') {
$("#sir_gnb").addClass("gnb320");
} else if ($(window).width() == '480') {
$("#sir_gnb").addClass("gnb480");
}
}
$(function(){
$(".gnb320").bind("<?php echo $event_handler; ?>", function() {
// 가로 너비가 320px 일때 모바일과 PC 각각의 효과
}
$(".gnb480").bind("<?php echo $event_handler; ?>", function() {
// 가로 너비가 480px 일때 모바일과 PC 각각의 효과
}
}
--- stylesheet
#sir_gnb.gnb320 {스타일 정의}
#sir_gnb.gnb480 {스타일 정의}
처럼 되는데요.
이 방법과 동일하면서 더 다양한 콜백 기능을 제공해주는 녀석이 enquire.js 입니다.
전체 스크립트 크기도 1kb 도 안 되지만 N스크린 개발에 상당히 유용할 것으로 보이네요.
댓글 3개
12년 전
글이 사라졌길래 지우셨나 했는데, 여기로 왔군요. ^^
js를 이용한 스크린 크기별 class 할당 방식이 '아주' 일반적인 것은 아닐겁니다.
이 방식을 일반화해서 라이브러리로 만드셔도 괜찮을것 같은데요? ^^
js를 이용한 스크린 크기별 class 할당 방식이 '아주' 일반적인 것은 아닐겁니다.
이 방식을 일반화해서 라이브러리로 만드셔도 괜찮을것 같은데요? ^^
12년 전
저도 라이브러리화 되었으면 좋겠어요! ㅠㅠ
lainfox
11년 전
만들어 주시는 건가요 ㅎㅎㅎ/
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6830 |
112211dd
|
11년 전 | 792 | |
| 6829 |
진짜다진짜가나타남
|
11년 전 | 1207 | |
| 6828 | 11년 전 | 821 | ||
| 6827 |
봉보로봉봉
|
11년 전 | 913 | |
| 6826 |
jinion
|
11년 전 | 823 | |
| 6825 | 11년 전 | 804 | ||
| 6824 |
yunkiri486
|
11년 전 | 724 | |
| 6823 |
2donggalbi
|
11년 전 | 852 | |
| 6822 | 11년 전 | 849 | ||
| 6821 | 11년 전 | 803 | ||
| 6820 | 11년 전 | 3106 | ||
| 6819 | 11년 전 | 1250 | ||
| 6818 | 11년 전 | 518 | ||
| 6817 |
 별을따는소년 |
11년 전 | 609 | |
| 6816 | 11년 전 | 2078 | ||
| 6815 | 11년 전 | 1215 | ||
| 6814 | 11년 전 | 865 | ||
| 6813 | 11년 전 | 605 | ||
| 6812 |
 Terrorboy |
11년 전 | 984 | |
| 6811 | 11년 전 | 582 | ||
| 6810 | 11년 전 | 1536 | ||
| 6809 |
낚시가좋아
|
11년 전 | 1047 | |
| 6808 | 11년 전 | 439 | ||
| 6807 | 11년 전 | 763 | ||
| 6806 |
Unhappy
|
11년 전 | 1775 | |
| 6805 | 11년 전 | 1606 | ||
| 6804 | 11년 전 | 1123 | ||
| 6803 | 11년 전 | 564 | ||
| 6802 |
asdfg
|
11년 전 | 1135 | |
| 6801 |
아트귀농인
|
11년 전 | 503 | |
| 6800 | 11년 전 | 2556 | ||
| 6799 | 11년 전 | 1357 | ||
| 6798 | 11년 전 | 1466 | ||
| 6797 | 11년 전 | 627 | ||
| 6796 |
purple63
|
11년 전 | 431 | |
| 6795 | 11년 전 | 2637 | ||
| 6794 |
커네드커네드
|
11년 전 | 962 | |
| 6793 | 11년 전 | 409 | ||
| 6792 | 11년 전 | 2499 | ||
| 6791 | 11년 전 | 526 | ||
| 6790 | 11년 전 | 2259 | ||
| 6789 |
리아빌리티
|
11년 전 | 3098 | |
| 6788 | 11년 전 | 1345 | ||
| 6787 | 11년 전 | 680 | ||
| 6786 | 11년 전 | 392 | ||
| 6785 | 11년 전 | 721 | ||
| 6784 |
Terrorboy |
11년 전 | 848 | |
| 6783 | 11년 전 | 585 | ||
| 6782 | 11년 전 | 3656 | ||
| 6781 |
리아빌리티
|
11년 전 | 487 | |
| 6780 | 11년 전 | 532 | ||
| 6779 | 11년 전 | 484 | ||
| 6778 | 11년 전 | 4692 | ||
| 6777 |
바보온달123
|
11년 전 | 616 | |
| 6776 | 11년 전 | 931 | ||
| 6775 | 11년 전 | 730 | ||
| 6774 |
DANet
|
11년 전 | 641 | |
| 6773 | 11년 전 | 1558 | ||
| 6772 | 11년 전 | 1356 | ||
| 6771 | 11년 전 | 619 | ||
| 6770 | 11년 전 | 1160 | ||
| 6769 | 11년 전 | 955 | ||
| 6768 | 11년 전 | 690 | ||
| 6767 | 11년 전 | 584 | ||
| 6766 | 11년 전 | 1264 | ||
| 6765 |
크림나이트
|
11년 전 | 999 | |
| 6764 | 11년 전 | 1543 | ||
| 6763 | 11년 전 | 2600 | ||
| 6762 | 11년 전 | 536 | ||
| 6761 |
Terrorboy |
11년 전 | 782 | |
| 6760 |
Terrorboy |
11년 전 | 712 | |
| 6759 | 11년 전 | 3352 | ||
| 6758 | 11년 전 | 1007 | ||
| 6757 | 11년 전 | 1267 | ||
| 6756 | 11년 전 | 891 | ||
| 6755 |
Terrorboy |
11년 전 | 568 | |
| 6754 |
Terrorboy |
11년 전 | 714 | |
| 6753 |
Terrorboy |
11년 전 | 1384 | |
| 6752 | 11년 전 | 608 | ||
| 6751 |
Terrorboy |
11년 전 | 653 | |
| 6750 |
Terrorboy |
11년 전 | 2020 | |
| 6749 | 11년 전 | 1216 | ||
| 6748 |
 HackYa |
11년 전 | 1117 | |
| 6747 | 11년 전 | 1170 | ||
| 6746 | 11년 전 | 840 | ||
| 6745 |
Terrorboy |
11년 전 | 911 | |
| 6744 | 11년 전 | 851 | ||
| 6743 | 11년 전 | 1290 | ||
| 6742 | 11년 전 | 540 | ||
| 6741 |
Abilityarch
|
11년 전 | 610 | |
| 6740 | 11년 전 | 653 | ||
| 6739 |
leewin20
|
11년 전 | 1234 | |
| 6738 | 11년 전 | 507 | ||
| 6737 | 11년 전 | 1219 | ||
| 6736 | 11년 전 | 1258 | ||
| 6735 | 11년 전 | 547 | ||
| 6734 | 11년 전 | 1284 | ||
| 6733 |
RipperTNT
|
11년 전 | 1839 | |
| 6732 |
Terrorboy |
11년 전 | 1336 | |
| 6731 |
Terrorboy |
11년 전 | 1395 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기