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

속성으로 구분하기

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

@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)">



출처 : http://firejune.com/1633