미디어 쿼리 질문입니다!


@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의 것을 실행하는 것인지가 궁금합니다!


조회수 289


Kakao codefestival banner

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