반응형 디자인을 위해 미디어 쿼리를 사용하는 가장 좋은 방법

1 미디어 쿼리 스타일을 별도의 파일로 분리하면, 페이지를 렌더링 하기 위한 Http 요청이

  늘어나고 결국 페이지 로딩이 느려짐

  따라서 기존의 스타일시트 내에 미디어 쿼리 스타일을 추가하는 방법을 추천

 

  @media screen and (max-width : 768px) { 내용 정의 }

 

2 모바일이나 작은 스크린용 디자인으로 시작하고 점차 다른 스크린을 위한 디자인으로 확대하는

  방법이 가장 좋음

 

3 제한적인 뷰포트에서 사이드바보다 메인 컨텐츠가 먼저 나와야 함

  콘텐츠를 네비게이션 위로 이동할 수 있음

 

* 미디터 쿼리의 경우 특정 뷰포트 범위만을 커버하며, 미디어 쿼리 적용 시점에서 레이아웃이

변경 되는 단점이 있고, 미래에 나올 모든 뷰포트에 대응할수 없음

가장 좋은 방법은 좀 더 유연한 디자인이 필요하며, 고정된 레이아웃이 아닌 유동형 레이아웃이

필요