다음 기능을 가진 반응형 웹을 만들려고 합니다.

• 너비가 600px 보다 작을 때는 파랗다.
• 너비가 600px 보다 클 때는 빨갛다.

미디어 쿼리를 사용하여 다음과 같이 두가지 방법으로 작성할 수 있습니다.

①

body {
	color: blue;
}

@media screen and (min-width: 600px) {
    body {
        color: red;
    }
}

②

body {
	color: red;
}

@media screen and (max-width: 600px) {
    body {
        color: blue;
    }
}

위 두 방법은 무슨 차이점이 있을까요? 그 이전에 차이가 있기는 할까요?

네. 있습니다.
①은 화면이 클 때를 미디어 쿼리로 처리하며, ②은 화면이 작을 때를 미디어 쿼리로 처리합니다.

여기서 ①은 모바일 우선 개발을, ②은 데스크탑 우선 개발을 의미합니다.

모바일 우선

모바일의 작은 화면을 위주로 개발하는 것으로, min-width 를 사용합니다.

> css 파일 예시

• 가로의 길이가 최소 900px이라면 미디어쿼리를 통해 작성된 부분 수행
• 가로 900px 미만이 디폴트

.test {
    height: 300px;
}

@media (min-width: 900px) { 
    .test {
        height: 600px;
    }
}

데스크탑 우선

데스크탑의 큰 화면을 위주로 개발하는 것으로, max-width 를 사용합니다.

> css 파일 예시

• 가로의 길이가 최대 900px이라면 미디어쿼리를 통해 작성된 부분 수행
• 가로 900px 초과가 디폴트

.test {
    height: 600px;
}

@media (max-width: 900px) { 
    .test {
        height: 300px;
    }
}

+ 결론

위 예시는 조건이 단순하여 큰 차이가 없어보이지만 조금이라도 조건이 단순해지면 무엇을 우선으로 잡고 레이아웃과 스타일을 변화시킬 것일지 정해야 합니다.
따라서 웹 디자인을 기획할 때 모바일과 데스크탑 중 무엇을 우선으로 할 것인지 확실히 해놓는 것이 좋을 것 같습니다.