데스크탑 웹 브라우저와 모바일 웹 브라우져(아이폰, 아이패드 등)등의 스타일시트(CSS)를 구분하기 위한 미디어 쿼리(Media Queries)를 Andy Clarke씨가 정리했습니다.
크게 스타일시트의 속성으로 구분하는 방법과 HTML의 link앨러먼트로 구분하는 두 가지 방법이 있습니다.
1. 스타일시트의 속성으로 구분하는 방법 : 이 방법은 스타일시트 파일 내에 아래와 같은 방법으로 @media on screen으로 시장하는 파일 만들어 /* Style */ 부분에 각각 기기마다의 스타일을 정의하는 방법입니다.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
2. HTML의 link 앨러먼트를 이용한 방법 : 하나의 큰 용량의 CSS파일에 1과 같이 모든 기기들의 스타일을 정의하고 싶지 않을 수가 있다. 이런 경우에는 link 앨러먼트를 이용하여서 media 속성에 같은 쿼리를 대신 넣어주고 스타일시트를 지정해 줄 수 있다.
<head>
<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)">
<link rel="stylesheet" href="ipad.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)">
<link rel="stylesheet" href="ipad-landscape.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)">
<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 : 1824px)">
<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)">
</head>
참조 :
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
http://firejune.com/1633
