可以响应.js处理内部样式表

Question

I use modernizer.js & respond.js to implement media query on IE8. 我使用modernizer.js和response.js在IE8上实现媒体查询。

I coded my page (HTML & Javascript) such as: 我对网页进行了编码（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>

It did not work. 这没用。

I then changed my code to: 然后，我将代码更改为：

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

And a separate CSS file "myStylesheet.css": 还有一个单独的CSS文件“ myStylesheet.css”：

@media (max-width: 500px) {
    body {
        background-color: blue;
    }
}

And it worked. 而且有效。

I had a quick look on respond.js Github page but could not find anything mentioned regarding internal stylesheet references not being supported. 我快速浏览了react.js Github页面，但找不到关于不支持内部样式表引用的任何提及。

Did I miss something? 我错过了什么？

Answer 1

It seems we have to connect respond.js after any styles internal or external. 看来我们必须在内部或外部的任何样式之后都连接response.js。 Then it should work! 然后它应该工作！

可以响应.js处理内部样式表

问题描述

1 个解决方案

解决方案1
0 2014-06-27 14:36:38

可以响应.js处理内部样式表

问题描述

1 个解决方案

解决方案1 0 2014-06-27 14:36:38

解决方案1
0 2014-06-27 14:36:38