티스토리 뷰
※ 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
'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