IE9 데스크탑 브라우저에 대한 @Media 쿼리

Question

IE9 데스크탑에 대한 @media 쿼리에 문제가 있습니다. 다른 사람이 브라우저의 크기를 줄이면 전체 레이아웃이 "화면"크기에 따라 변경되는 사이트를 만들었습니다. 전체 레이아웃이 화면 크기에 맞게 변경됩니다.

그러나 데스크톱의 IE9에서는 아무런 변화가 없습니다. 원본 레이아웃 (1024 해상도 용으로 빌드 됨)이 나타납니다. 그래서 768 화면 크기 (또는 그 이하)라고 말하는 사람은 레이아웃이 "흘러"보입니다. 그것들에 대한 IT는 변하지 않습니다.

사이트는 Chorme, 파이어 폭스, 심지어 오페라에서 작동하지만 IE9 바탕 화면에서 다음

내 콜 아웃입니다 : 내가 크기를 조정할 때

이

@media screen and (min-width: 768px) and (max-width: 959px){ 
bunch of settings 
} 

@media screen and (min-width: 480px) and (max-width: 767px){ 
bunch of settings 
} 

@media screen and (max-width: 320px) { 
bunch of settings 
} 

^^^ 이러한 IE9에 의해 인식되지 않습니다는 브라우저가 다운되었습니다.

도와주세요.

Answer 1

CSS3 미디어 쿼리는 IE9에서 지원되므로 미디어 쿼리가 작동해야합니다. 내 즉각적인 추측은 compatibility view을 켰을 때 스위치를 끄면 미디어 쿼리가 작동합니다.

---

난에 최종 미디어 쿼리를 업데이트 :

@media screen and (max-width: 479px) { 
    bunch of settings 
} 

내 생각 엔 당신이 당신의 IE9 브라우저 크기를 조정할 때, 그것은 320..it의 최대 폭이 320과 480 사이의 어딘가에 갇혀에 도달하지 않을 것입니다 따라서 미디어 쿼리 설정이 충족되지 않습니다. 따라서 기본값은 1024입니다. 최대 너비를 이전 뷰포트의 최소값 (480-1 = 479)보다 하나 작은 값으로 변경하면이 문제가 해결됩니다.

또는 ie9가 인식하지 못하고 다른 브라우저에서 문제가없는 쿼리 내에서 규칙에 몇 가지 문제가 있어야합니다.

Answer 2

IE9는 미디어 쿼리를 지원합니다. 순서를 바꾸면 제대로 작동합니다.

@media screen and (max-width: 320px) { 
    bunch of settings 
} 

@media screen and (min-width: 480px) and (max-width: 767px){ 
    bunch of settings 
} 

@media screen and (min-width: 768px) and (max-width: 959px){ 
    bunch of settings 
}