화면이 IE8에서만 미디어 쿼리가 선택되지 않음

Question

IE8에서 일부 테스트를 수행하고 있으며 브라우저에서 미디어 쿼리를 가져 오지 못하고 있음을 발견했습니다. 아래 예제에서 .telephone 클래스는 항상 첫 번째 클래스가 아니라 두 번째 클래스 선언으로 선택됩니다.

내 사이트가 기반으로하는 사이트가 IE8에서 올바르게 작동하는 이유는 무엇인지 알 수 없습니다.

나는 창이 640px보다 확실히 큰 것을 알고있다.

<link rel="stylesheet" type="text/css" media="all" href="<?php echo 'http://' . $_SERVER['SERVER_NAME']; ?>/inc/css/style.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="<?php echo 'http://' . $_SERVER['SERVER_NAME']; ?>/inc/css/index.css" />   

@media only screen and (min-width:640px) { 
    .telephone { 
     padding-top:.75em; 
      margin-bottom:.5em 
    } 
} 

.telephone { 
    display:block; 
    font-size:1.5em; 
    font-weight:normal; 
    line-height:1; 
    padding-top:.5em 
} 

Answer 1

스크린 너비를 기반으로 한 스크린 미디어 쿼리는 IE9부터 지원되는 CSS3 기능입니다. IE8 이하는 기능을 지원하지 않기 때문에 IE8 이하를 볼 수 없습니다. caniuse 미디어 쿼리에 대한 참조입니다.

Respond.js과 같은 JavaScript 폴리 필을 사용하거나 jQuery를 사용하는 경우 비슷하게 작동하는 write your own function을 사용할 수 있습니다. jQuery를 사용하지 않는 경우 비슷한 함수를 사용하여 일반 JavaScript에서 동일하게 처리 할 수 ​​있다고 생각하지만 $ (window) .load() 및 $ (window) .resize() 대신 window.onload 및 window.onresize가 사용됩니다. $ (window) .width() 대신 window.innerWidth를 사용하십시오.