我使用 modernizer.js 和 respond.js 在 IE8 上实现媒体查询。
我对我的页面(HTML 和 Javascript)进行了编码，例如:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Modernizr test page</title>
<style type="text/css" media="all">
@media (max-width: 500px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
Modernizr test page<br>
<script src="modernizr.custom.js"></script>
<script>
Modernizr.load({
test: Modernizr.mq('only all'),
nope: '//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'
});
</script>
</body>
</html>
没用。
然后我将我的代码更改为:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Modernizr test page</title>
<link rel="stylesheet" href="myStylesheet.css">
</head>
<body>
Modernizr test page<br>
<script src="modernizr.custom.js"></script>
<script>
Modernizr.load({
test: Modernizr.mq('only all'),
nope: '//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'
});
</script>
</body>
</html>
还有一个单独的 CSS 文件“myStylesheet.css”:
@media (max-width: 500px) {
body {
background-color: blue;
}
}
它奏效了。
我快速浏览了 respond.js Github page但找不到任何关于不受支持的内部样式表引用的提及。
我错过了什么吗？
最佳答案
看来我们必须在内部或外部的任何样式之后连接 respond.js。那么它应该可以工作了!
关于html - respond.js 可以处理内部样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21464582/