디바이스별 미디어 쿼리 정의

CSS 코드에서 미디쿼리 선언하기

@media Rules

@media only all and (조건문) {실행문}

@media: 미디터쿼리의 선언문이다. @media only, all, and (조건문) 사이에 공백은 필수 이다.
Media Type는 특정 미디어를 위해 특별히 제작 된 것이다. 예를 들어, “voice-family” 속성은 청각 사용자를 위해 설계된 것이다.

@charset “utf-8″;

/* All Device */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.

/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Tablet & Desktop Device */
@media all and (min-width:768px) {
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px) {
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}

/* Desktop Device */
@media all and (min-width:1025px) {
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}

위의 내용을 가지고 이렇게 사용이 가능하다:

/* 스마트폰 (가로/세로) : */
@media all and (min-width : 320px) and (max-width : 480px) {
/* viewport 너비가 320px 이상 '그리고' 480px이하이면 실행  */
}
@media all and (min-device-width : 320px) and (max-device-width : 480px) {
/* 스크린 너비가 최소 320px 이상 '그리고' 480px이하이면 실행  */
}

@media all and (min-width : 320px) and (max-width : 480px) {
/* viewport 너비가 320px 이상 '그리고' 480px이하이면 실행  */
/* Styles */
}

@media all and(device-width:320) and(device-height:480px {
/* 스크린 너비가 320px '그리고' 높이가 480px이면 실행 */
}

/* 스마트폰 (가로) : */
@media all and (min-width : 321px) {
/* Styles */
}

/* 스마트폰 (세로) : */ 
@media all and (max-width : 320px) {
/* Styles */
}

/* iPad (가로/세로) : */
@media all and
(min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPad(가로) : */
@media all and
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPad(세로) : */
@media all and
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* 데스크탑 브라우저(가로) : */
@media all and (min-width : 1224px) {
/* Styles */
}

/* 큰 모니터 : */
@media all and (min-width : 1824px) {
/* Styles */
}

/* iPhone4와 같은 높은 해상도 : */
@media all and (-webkit-min-device-pixel-ratio : 1.5), all and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

CSS파일로 분기하기

/* 스마트폰 (가로/세로) : */
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

/* 스마트폰 (가로) : */
<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)">

/* 스마트폰 (세로): */
<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)">

/* iPad (가로/세로) : */
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

/* iPad (가로) : */
<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

/* iPad (세로) : */
<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">

/* 데스크탑 브라우저 (가로) : */
<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1224px)">

/* 큰 모니터 : */
<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)">

/* iPhone4와 같은 높은 해상도 : */
<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">

orientation

예를 들어:

@media all and (orientation:portrait) { /* style */ } // 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행
@media all and (orientation:landscape) { /* style */ } // 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행

color: