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

최신 브라우저들이 (...) 실제 파일의 다운로드도 중단하는 건 아니다. 그러므로 각기 다른 미디어 쿼리 스타일을 별도의 파일로 분리하는 장점(개인의 선호 또는 코드의 구획화와 별개로)은 별로 없다. 별도의 파일을 사용하면 페이지를 렌더링하기 위한 HTTP 요청이 늘어나고, 결국 페이지 로딩이 느려진다.

따라서 기존의 스타일 시트 내에 미디어 쿼리 스타일을 추가하는 방법을 추천한다. 예를 들어, 기존 스타일 시트에 간단히 다음 구분을 사용해 미디어 쿼리를 추가한다.

@media screen and (max-width: 768px) {
지정한 스타일
}

출처 : 벤 프레인, HTML5와 CSS3로 작성하는 반응형 웹 디자인, 류영선 옮김, 에이콘(64)