[ 반응형 웹 하위브라우저에 대응하기 ] HTML5/CSS3/미디어쿼리 하위브라우저 대응





1. HTML5 요소를 지원하지 않는 브라우저에 대응하기

   -> 접속한 익스플로러 브라우저의 버전이 9보다 낮을 경우에만 해당 스크립트를 내려 받도록 함.


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





2. CSS3 속성을 지원하지 않는 브라우저에 대응하기

 -> http://css3pie.com 에서 파일 다운로드




-> 다운로드 받은 파일은 아래와 같이 사용

<style>
section{
behavior:url(PIE.htc);
}
</style>




3. 미디어 쿼리 속성을 지원하지 않는 브라우저에 대응하기


 -> https://github.com/scottjehl/Respond 에서 파일 다운로드




-> 다운로드 받은 파일은 아래와 같이 사용


<head>
<!--[if lt IE 9]><script src="respond.min.js"></script><![endif]-->
</head>





미디어 쿼리 지원 스크립트 파일 사용시 주의 사항


1. 로컬환경에서는 작동하지 않음 - 호스팅 서버나 웹서버를 이용한 테스트 필요.

2. 미디어 쿼리 속성을 사용할 때는  all and  구문을 생략하면 안됨.

3. css파일 내에서 css 파일을 불러오는 방식인 임포트 방식으로 미디어 쿼리 속성을 작성하면 작동하지 않음

4. html 문서내에 스타일 코드를 작성하는 방식인 임베디드 방식으로 미디어 쿼리 속성을 작성했을때는 작동하지 않음.




- 참고 도서 ( 추천 합니다!! )


Doit! 반응형 웹 만들기 by 이지스 퍼블리싱


+ Recent posts