미디어 쿼리 질문입니다!
조회수 1268회
@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 답변
-
<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가 노출 될 것입니다.
댓글 입력