본문 바로가기

퍼블리싱/반응형웹

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

반응형웹 작업시 주의사항

모바일작업을 우선시 한다

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



'퍼블리싱 > 반응형웹' 카테고리의 다른 글

반응형웹 분기점  (0) 2015.03.26
디바이스별 사이즈(Target a Specific Device)  (0) 2014.11.13