媒體查詢沒有在IE8中被屏幕拾起

Question

我在IE8上執行一些測試，我發現我的媒體查詢沒有被瀏覽器接收。在下面的例子中，.telephone類總是被選爲第二類聲明，而不是第一個類，並且具有margin-bottom。

我看不到這是什麼原因，因爲我的網站基於的網站在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及以下版本不會看到它們，因爲它們不支持該功能。針對媒體查詢的參考號爲caniuse。

您需要使用JavaScript polyfill，例如Respond.js，或者如果您使用的是jQuery，則可以使用write your own function，它們的作用類似。如果不使用jQuery，我相信你可以用普通的JavaScript來做同樣的事情，使用window.onload和window.onresize來代替$（window）.load（）和$（window）.resize（），並使用window.innerWidth而不是$（window）.width（）。