ie에서 미디어쿼리(media queries) 사용하는 방법

게시자: 대문 demun 카테고리: 퍼블리셔/기술 2012.12.12 09:00

표준웹브라우져는 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 비교글



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

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


신고

댓글

  1. 2014.02.27 23:15 신고 BlogIcon Readiz  댓글주소  수정/삭제  댓글쓰기

    혹시 respond.js 티스토리 반응형에 왜 적용 안되는지 아세요?
    제 블로그를 ie8에서도 반응형이 잘 되게 하고 싶은데 respond.js가 티스토리에서는 cross-domain문제 때문인지 전혀 먹고있지를 않네요..

    • BlogIcon 대문 demun 2014.03.04 08:42 신고  댓글주소  수정/삭제

      왜적용이 안된는지는 몰라도 이것 때문에 제가 티스토리 고객센터에 여러번 이의 제기를 한적이 있습니다.
      그냥 티스토리에서 업로드해서 사용하면 되는데....아무래도 치환자랑 겹치는것 같아요...