1

我正在开发一个响应式模板并使用 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（样式.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 中包含它时它的工作。那么我错过了什么？

4

1 回答 1

5

respond.js 特别声明它无法解析通过 @import 包含的媒体查询

https://github.com/scottjehl/Respond

“Respond.js 不解析通过 @import 引用的 CSS，也不适用于样式元素中的媒体查询，因为无法重新请求解析这些样式。”

于 2013-01-07T19:07:49.957 回答