CSS-IE7中的媒体查询 [英] CSS - media query in IE7
问题描述
我正在研究一个响应式模板，并使用CSS媒体查询.但似乎IE7不直接支持媒体查询.所以我寻找解决方案并找到 respond.js
但我无法使其正常工作.
I am working on a responsive template and using CSS media query. but seems IE7 doesn't support media query directly. so I looked for solution and found respond.js
but I can't make it work.
HTML:
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):
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 */
}
，但是当我直接在HTML中包含@media screen and (max-width: 320px) { }时，它就会起作用.
那我想念什么?
but when I include the @media screen and (max-width: 320px) { } directly in my HTML its working.
So what am I missing?
推荐答案
respond.js特别指出，它无法解析通过@import
respond.js specifically states it can't parse media queries included via @import
https://github.com/scottjehl/Respond
"Respond.js无法解析通过@import引用的CSS，也无法正常工作 在样式元素中进行媒体查询，因为这些样式不能 重新请求进行解析."
"Respond.js doesn't parse CSS refrenced via @import, nor does it work with media queries within style elements, as those styles can't be re-requested for parsing."
这篇关于CSS-IE7中的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
