2. 미디어 쿼리

※ IE6~8 브라우저=>

 respond.js :  https://github.com/scottjehl/Respond 

css3-mediaQueries.js : http://code.google.com/p/css3-mediaqueries-js

비교 : http://gionaf.com/playground/mq-fallback/results.html

※ 미디어 쿼리 참고 싸이트 : 

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

<!--[if lt IE 9]>

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 

<![endif]-->

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

속성으로 구분하기

...........................................................................................................................................................................

 

스마트폰 (가로/세로) :

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

 

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

 

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

 

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

 

iPad (가로) :
@media only screen and

(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

 

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

 

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

 

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

 

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

 

 

파일로 구분하기

...........................................................................................................................................................................

 

스마트폰 (가로/세로) :
<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)">

 

특정 기능 (컬러 화면)을 같춘 특정 미디어 타입('화면')의 기기

<link rel="stylesheet" media="screen and (color)" href="example.css" />

@import url(example.css) screen and (color);

[출처] 디바이스별 미디어 쿼리 정의|작성자 Smile