IE6~8에서 미디어쿼리 지원하기 (respond.js vs css3-mediaqueries.js)

 

 

IE6~8에서 미디어쿼리 지원하기

 

 

보통 반응형 웹사이트를 만들 때, 화면이 특정 너비가 되면 화면이 변하는 분기 처리(breakpoint)를 할 때

 

@media 미디어 쿼리 구문을 사용합니다. 하지만 @media 구문을 지원하는 브라우저를 보면 다음과 같습니다.

 

 

[css] 미디어 쿼리, @media query 이해하기

 

 

이미지 출처 : http://caniuse.com/#search=%40media

 

위 이미지에서 빨간색으로 표시된 IE8은 지원이 되지 않습니다. IE6, 7은 말할 것도 없겠죠..

 

아래 두 자바스크립트 라이버러리는 미디어쿼리를 지원하지 않는 IE6~8에서

 

반응형 웹디자인을 가능하게 해주는 스크립트입니다.

 

respond.js 

 

css3-mediaqueries.js

 

 

respond.js

 

 

장점: 빠르고 가벼움

 

주의: 

 

1. 미디어 구문 중 min-width와 max-width만 지원함.

 

(width, device-width, device-height, orientation, aspect-ratio 등을 지원하지 않음.)

 

2. 다음 처럼 link 태그 안에 속성 media를 지원하지 않음.

 

<link media="screen and ..."> 

 

3. @import 형식의 스타일시트 지원하지 않음

 
▶사용법

 

CDN 으로 삽입할 때

 

1. 다음 구문을 </body> 바로 위에 삽입.

 

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

 

if lt ie9는 ie9 이하버전일 경우... 라는 뜻이며, 해당 버전만 이 구문을 해석하고 실행하며

 

다른 브라우저들은 이 구문을 무시합니다.

 

2. 그리고 미디어쿼리 구문을 작성합니다.

 

@media screen and (min-width: 980px)
{
 / * CSS Document * /
}

 

 

직접 다운 받아 파일 삽입하려면?

 

다운로드 사이트 : https://github.com/scottjehl/Respond

 

 

css3-mediaqueries.js

 

respond.js 파일보다는 속도가 느림

 

주의 사항은 respond.js와 동일함

 

 

▶사용법

 

다음 구문을 </body> 바로 위에 삽입.

 

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

 

참조 : https://code.google.com/p/css3-mediaqueries-js/

 

 

▶읽어주세요

 

css3-mediaqueries.js파일은 respond.js 을 사용할 수 없는 상황에만 쓰는 게 바람직하다고 하는데

 

respond.js 는 보고되는 버그가 많습니다.

 

그리고 서브도메인을 사용하고 있을 경우 작동이 잘 안 됩니다.

 

저도 여러가지 방법으로 이 파일 삽입을 시도했지만 티스토리에서 전혀 작동하지 않고 있습니다.

 

하지만 하나 생각해 볼 것은, 반응형 웹디자인은 다행히도 모바일 환경에서 자주 사용되고

 

대부분 모바일이 iOS, Android  운영체제라  IE6~8에서 미디어쿼리가 적용되지 않더라도

 

크게 문제될 것은 없을 것으로 보입니다.

 

IE6~8 버전은 어차피 데스크탑 환경에서 사용하는 브라우저이므로, 반응형이 되지 않더라도

 

가독성이 그리 떨어지지 않으니까요

 

[참조 사이트]

http://lipstickonthepig.com/wordpress/using-respond-js-when-your-site-css-is-on-a-cdn-or-subdomain/

https://github.com/scottjehl/Respond/blob/master/README.md

 

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)

 

IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기