반응형웹 작업시 주의사항

모바일작업을 우선시 한다

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



글쓰고 저장

반응형웹 분기점

2015. 3. 26. 14:51에 씀

크게 나눈다면 모바일 - 태블릿 - 웹

좀 작게 나눈다면 모바일 - 태블릿(세로) - 태블릿(가로)/ 노트북 - 웹


ipad를 기준으로 예를 들면, 태블릿의 경우 세로로 놓으면 768pixel이지만, 가로로 놓으면 1024pixel이기때문에,

태블릿의 가로와 노트북사이즈의 웹을 하나로 묶어서 한다.


구글링으로 찾은 몇가지 이미지를 보면 이해가 감.


아래는 4분류로 나누었고,




여기는 세분류로 나누었다.





이건 2013년거이긴한데, 여튼 반응형웹이 무엇인지에 대해 알려주는 반응형웹 인포그래픽이다.

아래에선 네분류로 나누었다.



글쓰고 저장

Targets

(http://cssmediaqueries.com/target/)
DeviceDevice widthDevice heightPixel ratio
HTC One

360

640

3

Samsung Galaxy S2

320

534

1.5

Samsung Galaxy S3

320

640

2

Samsung Galaxy S4

320

640

3

Samsung Galaxy S5

360

640

3

LG Nexus 4

384

592

2

LG Nexus 5

360

592

3

Asus Nexus 7

601

906

1.33

iPad 1 and 2

768

1024

1

iPad Mini

768

1024

1

iPad 3 and 4

768

1024

2

iPhone 3G

320

480

1

iPhone 4

320

480

2

iPhone 5

320

568

2

iPhone 6

375

667

2

iPhone 6 Plus

414

736

3

Huawei Ascend P6

360

592

2

Huawei Ascend P7

360

592

3

OnePlus One

360

640

3



글쓰고 저장