'미디어쿼리'에 해당되는 글 1건

  1. 2010.10.25 미디어쿼리

미디어쿼리

카테고리 없음 2010. 10. 25. 11:42

데스크탑 웹 브라우저와 모바일 웹 브라우져(아이폰, 아이패드 등)등의 스타일시트(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

Posted by 강부자아들
,