반응형 작업 시 미디어쿼리 최소화 하는 방법

미디어쿼리(Media Query)

화면(screen), 티비(tv), 프린터(printer)와 같은 미디어 타입과 적어도 하나 이상의 표현식으로 구성된다.
표현식은 width, height, color와 같은 미디어 특성들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다.
미디어쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다.

rem등 단위를 활용

반응형 작업시 rem 단위는 상대적인 단위로, 루트 요소(HTML 요소)의 폰트 크기를 기준으로 크기를 결정한다.
따라서, 미디어 쿼리에서 rem 단위를 사용하면 브라우저 크기에 따라 자동으로 크기를 조정할 수 있어 편리하다.

그렇다면 이를 최소화로 잡는 방법이 무엇이 있을까?

1. 미디어 쿼리에서 최소화된 값만 사용하기
우리는 작업을 하다보면 px를 사용을 많이하게되는데 px대신 rem 단위를 사용할 수도 있다.
그러나 모든 값에 대해 rem 단위를 사용하는 것보다는 최소화된 값만 사용하는 것이 좋다.
예를 들어, 폰트 크기나 여백 값 등에서만 rem 단위를 사용하고, 너비나 높이 값은 px 단위를 사용하는 것 처럼 최소화된 값만 사용하는것이 좋다.

2. 범위를 지정하기
min-width와 max-width 속성을 함께 사용하여 범위를 지정하여 코드를 사용하는 방법이 있다.

@media (min-width: 768px) and (max-width: 1024px) {
	.container {
    	font-size: 1.2rem;
    	margin: 1rem;
}

3.미디어 쿼리에서 적절한 기준값을 선택하기
미디어 쿼리에서 사용할 적절한 기준값을 선택하는 것이 중요하다.
브라우저의 특정 크기를 기준으로 작업을 진행하는 것이 좋다.
예를 들어, 대부분의 모바일 기기에서는 320px ~ 480px 사이의 크기를 사용하므로, 이를 기준값으로 작성하는 것이 좋다.