미디어 쿼리 질문입니다!

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

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가 노출 될 것입니다.

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

작성한 답변에 다른 개발자들이 댓글을 작성하거나 댓글에 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.