2015-07-21 88 views
1

我已經在我的網站上應用@media查詢,以便根據屏幕分辨率做出響應,但是它不起作用,而之前它工作正常。@media查詢不支持IE 8

我在下面分享頁碼。請有人幫我看看爲什麼我的代碼失敗了。

<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"> 

+1

除了已發佈的答案:[MDN兼容性表](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Browser_compatibility)用於媒體查詢 – Curious

回答

1

查詢不支持IE8媒體,你需要使用pollyfill修補功能的舊版本瀏覽器(如果你必須支持他們)

一種選擇是使用使用respond以獲得在IE8中工作的媒體查詢

使用pollyfill的另一種方法是查看gracefully degrading併爲舊版瀏覽器提供可接受的功能,而不是pollyfill。

請記住,較舊的瀏覽器也是性能最差的(與現代瀏覽器相比),它們也可能在較舊的硬件上運行。

將pollyfills添加到已經不足的瀏覽器會降低用戶體驗。

0

請參閱從Bootsrap

那塊doc由於瀏覽器的安全規則,Respond.js不通過文件瀏覽 頁面工作://協議(打開本地的HTML文件時等) 。 要測試IE8中的響應功能,請通過HTTP(S)查看您的頁面。詳情請參閱 Respond.js docs