4

我正在使用 Twitter Bootstrap 2.3.0 版构建一个 HTML 页面。由于 IE 小于 9 不支持媒体查询，我尝试使用 css3-mediaqueries.js。文档说你只需要在所有 css 之后包含脚本。我这样做了。下面是我的页面布局。

   <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="Responsive page">
      <meta name="author" content="Author name">
      <title>Responsive page built on Twitter Bootstrap</title>
      <link href="css/bootstrap.min.css" rel="stylesheet" type='text/css'>
      <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type='text/css'>
      <link href="css/my-page.css" rel="stylesheet" type='text/css'>
      <link href="css/my-page-responsive.css" rel="stylesheet" type='text/css'>
     </head>
     <body>
       <div class="container">
         <!-- My html goes here -->
       </div>
       <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
        </script> <![endif]-->
     </body>
    </html>

但仍然没有运气。我没有在我的页面中使用任何 HTML5 元素。javascript控制台中没有记录错误。

然后我尝试使用会引发以下异常的respond.js。

Unspecified error.
respond.js, line 309

我在这里做错了什么？

4

3 回答 3

4

您仍然需要将脚本放在您的<head>, 样式表之后。将它放在文档的底部会导致页面在脚本加载到内存之前呈现。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Responsive page">
  <meta name="author" content="Author name">
  <title>Responsive page built on Twitter Bootstrap</title>
  <link href="css/bootstrap.min.css" rel="stylesheet" type='text/css'>
  <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type='text/css'>
  <link href="css/my-page.css" rel="stylesheet" type='text/css'>
  <link href="css/my-page-responsive.css" rel="stylesheet" type='text/css'>
  <!--[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->
</head>
于 2013-02-26T21:28:43.637 回答
0

如果您想在 IE8 中使用媒体查询，则必须使用 Respond.js。这是为 IE 等浏览器启用媒体查询的 polyfill。另一个不错的选择是adapt.js。希望这会帮助你。

于 2013-02-27T20:02:49.433 回答
0

在结束标记之前添加 respond.js </body>。另外，请检查本地主机内的页面，否则会抛出错误。我在许多站点中都使用过这种方式，并且在 IE7 和 IE8 中运行良好。

于 2013-07-29T06:33:42.893 回答