반응형웹작업시 미디어쿼리 사용하기

반응형웹 작업시 주의사항

모바일작업을 우선시 한다. 

css 작성시 [전체적용부분 - 모바일 -태블릿 - 웹] 순으로 작업하는 것이 좋다.

웹환경대비 모바일환경에서 성능이 저하되는 경우가 있으므로, 

모바일 css를 기본으로 작성하고, sprite기법을 사용하거나 웹폰트를 모바일 css에서 사용하지 않는 것이 좋다.

작업전 뷰포트 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">

외부에서 분기하는 방법

<link rel="stylesheet" type="text/css" media="all" href="mobile.css">

<link rel="stylesheet" type="text/css" media="all and (min-width:768px) and (max-width:1024px)" href="tablet.css">

<link rel="stylesheet" type="text/css" media="all and (min-width:1025px)" href="web.css">

 css 내부에서 분기하는 방법

 /* All */

 /* Mobile */

 /* Tablet and Notebook */

 @media all and (min-width:768px) and (max-width:1024px){

}

 

 /* Desktop */

@media all and (min-width:1025px){

}

IE8 브라우저의 하위 호환성 문제해결

미디어쿼리는 IE9부터 지원된다. 

만약 프로젝트가 IE8이하버전도 고려해야한다면 자바스크립트 라이브러리를 활용하면 된다.

respond.min.js  : https://github.com/scottjehl/Respond

<!--[if lt IE 9]>

<script type="text/javascript" src="/js/respond.min.js"></script>

<![endif]-->

참고사이트 : http://biew.co.kr/26