Question

我正在处理响应式模板并使用CSS媒体查询。但似乎IE7不直接支持媒体查询。所以我寻找解决方案并找到respond.js
但我不能让它发挥作用。

的 HTML： 的

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script type="text/javascript" src="js/respond.min.js"></script>
</head>
<body>

   <!-- ... -->

</body>
</html>

CSS（style.css）：

@import "reset.css";
@import "fonts.css";
@import "bootstrap.css";
@import "plugins.css";
@import "ui.css";

@media screen and (max-width: 320px) { 
    /* css */
}

但是当我将@media screen and (max-width: 320px) { }直接包含在我的HTML中时，它正在工作。那我错过了什么？

Answer 1

respond.js明确指出它无法解析通过@import

包含的媒体查询

https://github.com/scottjehl/Respond

“Respond.js不通过@import解析CSS refrenced，也不起作用在样式元素中使用媒体查询，因为这些样式不能重新请求解析。“

CSS - IE7中的媒体查询

1 个答案: