Responsible Layout
모바일 기기의 다양한 스크린 크기에 맞춰서 출력하도록 설정 하는 것이며 다양한 크기의 웹사이트 지원을 위해
유동적인 CSS 적용 및 media query를 사용한다.
방향에 따른 클래스
디바이스의 가로/세로 방향에 따른 CSS를 활용 할 수 있다.
- portrait {
- /* 가로방향일 때 CSS */
- }
- .landscape {
- /* 세로방향일 때 CSS */
- }
크기에 따른 클래스
디바이스의 너비에 따라서 설정되는 클래스이다.너비는 320,480,768,1024px 점을 가진다.
- 일반 클래스
- .myelement {
- /* 일반 클래스 */
- }
- 너비가 480px 이하 일 때 적용되는 클래스
- .min-width-480px.myelement {
- /* 너비가 480px이하일 때 적용되는 클래스 */
- }
크기 제어 포인트
크기에 따른 클래스 설정시 기존 포인트 외에 새로운 포인트를 추가하고 싶을 경우 사용한다.
- 1200px에 Breakpoint 추가
- $.mobile.addResolutionBreakpoints(1200);
- 2개 이상의 Breakpoint 추가
- $.mobile.addResolutionBreakpoints([1200, 1440]);
Media Queries
CSS의 특정 미디어 쿼리 적용 여부를 테스트하는 기능이다. 지원하면 true, 지원하지 않으면 false가
반환된다.
- screen 미디어 형식 테스트
- $.mobile.media("screen");
- screen 미디어 형식과 min-width 테스트
- $.mobile.media("screen and (min-width: 480px)");
- screen 미디어 형식과 iOS 디스플레이 여부 테스트
- $.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");