IE 8不支持@media查詢

Question

我在我的網站中應用了@media查詢，以使其根據屏幕分辨率做出響應，但是它不起作用，而更早之前，它可以正常工作。

我在下面共享頁面代碼。 請有人在這里幫助我，為什么我的代碼會失敗。

<link href="header.css" rel="stylesheet">
<link href="indexcss.css" rel="stylesheet">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->       
<link rel="shortcut icon" href="images/icon.jpg">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">

Answer 1

不幸的是，IE8不支持媒體查詢。

http://caniuse.com/#feat=css-media-resolution

Answer 2

IE8不支持媒體查詢，您需要使用pollyfill修補舊版瀏覽器的功能（如果必須支持它們）

一種選擇是使用使用響應來使媒體查詢在IE8中工作

使用pollyfill的另一種方法是仔細地降級並為較舊的瀏覽器提供可接受的功能，而不是pollyfill。

請記住，較舊的瀏覽器是likley，也是性能最差的（與現代瀏覽器相比），並且它們也有可能在較舊的硬件上運行。

向已經表現不佳的瀏覽器中添加pollyfills會降低用戶的體驗。

Answer 3

請參閱Bootsrap的文檔

由於瀏覽器的安全規則，Respond.js不適用於通過file：//協議查看的頁面（例如，打開本地HTML文件時）。 要測試IE8中的響應功能，請通過HTTP（S）查看您的頁面。 有關詳細信息，請參見Respond.js文檔 。