Respond.js 시작하기

1 개요[ | ]

Respond
리스폰드
Respond.js 시작하기
Respond.js 튜토리얼

polyfill의 일종
경량 반응형웹 자바스크립트 라이브러리
구형 웹브라우저에서 반응형 웹에 필요한 기능 보조
CSS3 규격의 min/max-width 미디어 쿼리 지원하도록 보조함
IE 구버전과 같이 CSS3 @media를 지원하지 않는 브라우저에서도 정상 작동하도록 해줌^[1]

IE 6~8 지원

2 예시: 테스트1[ | ]

예제: http://zetawiki.com/ex/js/respond/test1.html

test1.html

<!DOCTYPE html>
<link rel="stylesheet" href="test1A.css"/>
<link rel="stylesheet" href="test1B.css" media="screen and (min-width: 37.5em)"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>

<p>Respond.js 테스트</p>
<div>참고: <a href='//zetawiki.com/wiki/Respond.js_시작하기'>http://zetawiki.com/wiki/Respond.js_시작하기</a>
</div>
<div id="attribute-test">너비 37.5em(600px @16px) 이상일때만 보임</div>

test1A.css

body { background: gray; }
p {
	width: 60%;
	min-width: 18.75em; /* 300px @ 16px */
	max-width: 43.75em; /* 700px @ 16px */
	margin: 2em auto;
	background: #fff;
	padding: 20px;
}
a { color: #333; }
#attribute-test { display: none; }

@media only screen and (min-width: 18.75em){ body { background: red; } }
@media only screen and (min-width: 30em) and (max-width: 38.75em) { body { background: orange; } }
@media screen and (min-width: 38.75em),only print,projector{body{background:yellow;}}
@media screen and (min-width: 50em){ body { background: green; } }
@media screen and (min-width: 68.75em){ body { background: blue; } }
@media screen and (min-width: 1200px){ body { background: navy; } }
@media only screen and (min-width: 1250px) and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-width: 1250px) and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (min-width: 1250px) and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-width: 1250px) and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-width: 1250px) and (min-device-pixel-ratio: 1.5),
	only screen and (min-width: 1250px) and (min-resolution: 1.5dppx),
	screen and (min-width: 1250px) {
	body { background-color: violet; }
}

test1B.css

#attribute-test {
	display: block;
	color: #fff;
	background: black;
	text-align: center;
}

테스트 결과

너비 ~ 298px: 회색 배경
너비 299px ~ 479px: 빨간색 배경
너비 480px ~ 619px: 주황색 배경
너비 620px ~ 799px: 노란색 배경
너비 800px ~ 1100px: 초록색 배경
너비 1101px ~ 1199px: 파란색 배경
너비 1200px ~ 1249px: 남색 배경
너비 1250px ~: 보라색 배경

3 같이 보기[ | ]

4 참고[ | ]

↑ 즉 CSS3 @media를 지원하는 브라우저는 respond.js 없어도 정상동작함

[1] 즉 CSS3 @media를 지원하는 브라우저는 respond.js 없어도 정상동작함

[1]