미디어 쿼리를 지원하지 않는 브라우저에 대응하려면? respond.js 사용하기

반응형 웹은 기본적으로 데스크탑을 비롯해 태블릿, 모바일 등 다양한 기기에 대응할 수 있어야 합니다. 그런데 아직까지 국내 사용자가 많은 인터넷 익스플로러 브라우저의 6~8버전에서는 반응형 웹이 동작하지 않습니다. 

인터넷 익스플로러 6~8버전을 비롯해 미디어 쿼리를 지원하지 않는 브라우저에서도 반응형 웹이 동작하도록 설계하려면 respond.js 자바스크립트 라이브러리를 다운로드해서 링크하면 됩니다. 

github 링크 : github.com/scottjehl/respond 

scottjehl/Respond

다운로드 방법

src/respond.js 파일을 원하는 폴더로 복사합니다.

그리고 css의 조건 주석문을 사용해 인터넷 익스플로러 9 이하 버전일 경우, respond.js 파일을 가져오는 소스를 작성합니다.  respond.js 파일 경로를 표시할 때는 폴더 이름까지 함께 표기해야 하는데, 만일 script 폴더안에 저장했다면 다음과 같이 작성합니다.

<!--[if It IE 9]

             <script src="script/respond.js"></script>

<[endif]-->

 

<출처:  책 [프런트엔드 웹디자인 입문, 고경희 지음] >