본문 바로가기

퍼블리싱/반응형웹

반응형웹작업시 미디어쿼리 사용하기 반응형웹 작업시 주의사항모바일작업을 우선시 한다. css 작성시 [전체적용부분 - 모바일 -태블릿 - 웹] 순으로 작업하는 것이 좋다.웹환경대비 모바일환경에서 성능이 저하되는 경우가 있으므로, 모바일 css를 기본으로 작성하고, sprite기법을 사용하거나 웹폰트를 모바일 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 브라우저의 하위 호환성 문제해결미디어쿼.. 더보기
반응형웹 분기점 크게 나눈다면 모바일 - 태블릿 - 웹좀 작게 나눈다면 모바일 - 태블릿(세로) - 태블릿(가로)/ 노트북 - 웹 ipad를 기준으로 예를 들면, 태블릿의 경우 세로로 놓으면 768pixel이지만, 가로로 놓으면 1024pixel이기때문에,태블릿의 가로와 노트북사이즈의 웹을 하나로 묶어서 한다. 구글링으로 찾은 몇가지 이미지를 보면 이해가 감. 아래는 4분류로 나누었고, 여기는 세분류로 나누었다. 이건 2013년거이긴한데, 여튼 반응형웹이 무엇인지에 대해 알려주는 반응형웹 인포그래픽이다.아래에선 네분류로 나누었다. 더보기
디바이스별 사이즈(Target a Specific Device) Targets(http://cssmediaqueries.com/target/)DeviceDevice widthDevice heightPixel ratioHTC One3606403Samsung Galaxy S23205341.5Samsung Galaxy S33206402Samsung Galaxy S43206403Samsung Galaxy S53606403LG Nexus 43845922LG Nexus 53605923Asus Nexus 76019061.33iPad 1 and 276810241iPad Mini76810241iPad 3 and 476810242iPhone 3G3204801iPhone 43204802iPhone 53205682iPhone 63756672iPhone 6 Plus4147363Huawei .. 더보기