[[Screen-Breakpoints]]

@media 경계치

반응형 경계치 (Responsive breakpoints)라고도 불리며, CSS3 media query를 이용하여 반응형 웹페이지를 만들때, 변화가 일어나는 경계치입니다.

일반적으로 중요한 경계치 (Major breakpoints)와 기기별 세부 경계치 (Minor breakpoints) 두가지로 나누어서 구분짓기도 합니다.

대표적인 경계치 (breakpoints)

Andy Clark과 Yiibu 분류 1)

중요 세부 기기들
240 일부 안드로이드(p), 많은 블랙베리들: 많은 S40(p), 거의 모든 S60(p)
320 아이폰(p), 많은 안드로이드(p), 많은 블랙베리: S60 QWERTY, 거의 모든 S60 (l), S40 QWERTY
360 심비안 터치 (p)
480 아이폰(l), 안드로이드(l), 일부 심비안 터치(l), 일부 테블릿(l)
600 일부 태블릿(p), 이북리더들
640 일부 심비안 터치 (l)
720
768 아이패드(p), 일부 안드로이드 태블릿 (p)
800 일부 태블릿(l)
1024 일부 태블릿, 거의 모든 넷북, 많은 데스크탑
1280 일부 태블릿(l)
1366 많은 노트북들

트위터 Bootstrap

  • 일종의 중요한 경계치 (major breakpoints) 라 볼 수 있으며, 레이아웃과 그리드 폭을 결정합니다.

가로폭 명칭
480px 이하 스마트폰
481 ~ 767px 스마트폰 부터 태블릿
768 ~ 979px 태블릿 세로
980 ~ 1199px 기본
1200px 이상 큰 화면

mediaqueri.es

가로폭 명칭
320px 스마트폰
768px 태블릿
1024px 넷북
1600px 데스크탑

Smashing Magazine Breakpoints

  • 대표적은 아니지만, 근래의 '기기의 스크린 폭을 경계치로 사용하지 않고, 각 스크린의 중간쯤을 경계치로 사용'하는 경향에 해당됩니다.
  • 출처: 링크

가로폭 변화
~ 499px 유동형 레이아웃으로 처리
500 ~ 609px 검색 버튼을 Go! 에서 Search 로 전환
610 ~ 649px 네이게이션 버튼이 리스트 형태 메뉴로 전환
650 ~ 799px 광고를 오른쪽으로 붙힘
800 ~ 1019px 상단의 리스트 형태 메뉴를 좌측 네비게이션 사이드로 전환, 3컬럼
1020 ~ 1219px 좌측 네비게이션 사이드는 다시 상단 메뉴로 올리고,
우측의 aside 컬럼이 생기고, 광고와 기타 여러 배너들이 등장, 3컬럼
1020 ~ 1449px 좌측 네비게이션 사이드 다시 등장, 3컬럼
1450 ~ 탑레벨 메뉴를 최좌측 컬럼으로 이동, 4컬럼

참고: 디스플레이 해상도

1) 둘의 경계치 분류가 수치는 동일하고 해당 기기 목록이 조금 다릅니다
테러보이 12-08-21 09:29
답변 삭제  

감사합니다.~ 참고하겠습니다.

업데이트 : 2012-07-27 08:05 / 작성자 : 전진 / 조회 : 4,043
공헌자 : junjin