미디어 쿼리 질문입니다!


@media screen and (min-width: 600px)

@media screen and (min-width: 900px)

css 파일 안에 위의 순서대로 미디어쿼리가 짜여있고 스크린의 크기가 950px이라면 min-600의 코드는 완전히 무시되는 것인가요?

음...

일단 900이상이니 min-900 의 코드는 실행되는 것은 당연한 것이고 , 제가 궁금한 것은 min-600 의 코드가 완전히 무시되는 것인지 아니면 600의 코드도 실행이 되지만 600과 900에 겹치는 선택자는 900의 것으로 적용되고 900에는 없지만 600에는 있는 것은 600의 것을 실행하는 것인지가 궁금합니다!


조회수 182


1 답변


좋아요
1
싫어요
채택취소하기
<style>
@media screen and (min-width: 600px) {
h1 {color:red;}
}

@media screen and (min-width: 900px) {
h1 {color:blue;}
}
</style>
<h1>test</h1>

900 이상은 blue
600~900 사이는 red 600 이하는 지정이 안되어서 기본 값이 검정 입니다. 브라우저의 가로 길이를 마우스로 조정하시면 실시간으로 반영 됩니다.

그리고 만약 900이상 가로 사이즈에서 개발자 도구 열어보시면 600에 적용된 CSS 가 오버라이드 된 것을 확인하실 수 있습니다. 따라서 900 이상일 때 600 CSS를 오버라이드 하므로 600에만 있고 900에는 없는 CSS일경우 900에서 오버라이드 할 것이 없으므로 600 css가 노출 될 것입니다.

  • 2016년 06월 27일에 작성됨

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close