표준웹브라우져는 media queries 를 지원하기 때문에 따로 추가적인 방법을 사용하지 않아도 됩니다. 

하지만 ie는 media queries 를 지원하지 않기 때문에 자바스크립트를 추가해줘야 합니다.


자바스크립트를 사용해서 윈도우의 너비를 안다거나, 기타 기술에 대한것은 여기서는 다루지 않고 단순이 ie가 미디어쿼리를 인식하는 방법만 이야기 하겟습니다.


미디어쿼리를 지원하는 자바스크립트는 유명한것이 두가지가 있습니다.

바로 respond.js 와  css3-mediaqueries.js 입니다.

자세한 정보와 다운로드 받을수 있는 주소는 아래와 같습니다.


repond.js => https://github.com/scottjehl/Respond/downloads

css3-mediaqueries.js => http://code.google.com/p/css3-mediaqueries-js/


css3-mediaqueries.js 의 경우는 구글코드를 지원하기 때문에 아래처럼 사용하면 됩니다.


<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

respond.js 도 사용법은 같습니다.

ie만 적용되게 주석처리해서 사용하면 됩니다.


이처럼 두가지중 하나의 자바스크립트만 로드시켜주면 미디어쿼리를 사용할 수 있습니다.

어때요 간단하죠?


두 라이브러리중 어떤걸 사용할지는 아래의 주소를 보시면 판단하는데 도움이 될겁니다.

두 라이브러리 비교 -> http://gionaf.com/playground/mq-fallback/results.html



respond.js 와 css3-mediaqueries-js 비교글



참고로 그리드 시스템을 잘만 활용한다면 구지 미디어쿼리를 사용안해도 반응형으로 할 수 있습니다.

하지만 활용폭이 아무래도 적겠지요.