2012. 11. 13. 00:39 모바일 웹
반응형 디자인을 위해 미디어 쿼리를 사용하는 가장 좋은 방법
1 미디어 쿼리 스타일을 별도의 파일로 분리하면, 페이지를 렌더링 하기 위한 Http 요청이
늘어나고 결국 페이지 로딩이 느려짐
따라서 기존의 스타일시트 내에 미디어 쿼리 스타일을 추가하는 방법을 추천
@media screen and (max-width : 768px) { 내용 정의 }
2 모바일이나 작은 스크린용 디자인으로 시작하고 점차 다른 스크린을 위한 디자인으로 확대하는
방법이 가장 좋음
3 제한적인 뷰포트에서 사이드바보다 메인 컨텐츠가 먼저 나와야 함
콘텐츠를 네비게이션 위로 이동할 수 있음
* 미디터 쿼리의 경우 특정 뷰포트 범위만을 커버하며, 미디어 쿼리 적용 시점에서 레이아웃이
변경 되는 단점이 있고, 미래에 나올 모든 뷰포트에 대응할수 없음
가장 좋은 방법은 좀 더 유연한 디자인이 필요하며, 고정된 레이아웃이 아닌 유동형 레이아웃이
필요
'모바일 웹' 카테고리의 다른 글
모바일 해상도 크기 알아 내는 사이트 (0) | 2012.12.12 |
---|---|
뷰포트와 스크린 크기 (0) | 2012.11.13 |
모바일에서 클릭 아이콘 최소 크기 44 * 44 (0) | 2012.04.02 |
[링크 : 공인인증서 관련] Web Crypto API의 현재와 미래 (0) | 2012.03.29 |
모바일 웹 전반 - 어비의 모바일 웹 책 간단 정리 (0) | 2012.03.28 |