0
나는 여러 가지 쿼리를 설정했지만, 실제로 아무 것도 실제로 작동하지 않는다는 것을 깨달았습니다. 그래서 나는 하나씩 테스트하기 시작했다. 1217.css는 1201px보다 큰 모든 것입니다. 1200css는 최대 1200px이고 600css는 최대 600px 너비입니다. 이제 창 크기를 재조정하면 1200.css에서 1217.css로 변경됩니다. 그러나 창 너비를 600px로 낮추면 아무 일도 일어나지 않습니다. 마치 현재 존재하는 스타일이없는 것입니다. 1200css는 여전히 1200px 이하의 항목에 적용됩니다. 600.css 스타일이 적용되지 않는 이유는 무엇입니까?이상한 미디어 쿼리 - 적용되지 않음
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 600px) " href="600.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 1200px)" href="1200.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1201px)" href="1217.css" />
1217.css
#contentQuote {
background-color: red;
}
1200.css
#contentQuote {
background-color: #f07057;
}
600.css
#contentQuote {
background-color: blue;
}
감사합니다. 3 가지 스타일이 적용되었습니다. 하지만 내 질문은, 왜 브라우저가 같은 로직을 사용하지 않을 것입니다 : 좋아, 폭 550px -> 600.css 사용; 좋아, 너비는 601px -> 1200css를 사용하십시오. 내 생각에는 결함이 어디 있습니까? – user1830833
max-width : 1200px를 지정할 때 max-width : 600px를 제공하는 화면 크기도 포함되어 있기 때문입니다. 따라서 덮어 씁니다. – mechanicals