티스토리 뷰

HMLT&CSS&JS/CSS

2. 미디어 쿼리

turfrain 2012. 9. 13. 13:21

※ 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);


'HMLT&CSS&JS > CSS' 카테고리의 다른 글

CSS3 요소  (0) 2017.05.08
# CSS 말줄임  (0) 2013.07.05
1. CSS 메소드  (0) 2012.09.13
3. position  (0) 2011.07.22
# font  (0) 2011.07.22
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday