在ie8及以下使用twitter bootstrap响应.js [英] Respond.js with twitter bootstrap on ie8 and below

查看:98
本文介绍了在ie8及以下使用twitter bootstrap响应.js的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在实施一个带有Twitter bootstrap的响应式网站,但在iexplorer 8及以下版本中无法使用媒体查询。

i'm implementing a responsive website with twitter bootstrap but on iexplorer 8 and below can't use media queries.

我为try response创建了一个简单示例。 js但媒体查询继续不在iexplorer 7-8上工作,这里是html:

I create a simple example for try respond.js but mediaqueries continue not working on iexplorer 7-8, here is the html:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<meta name="Description" content="Web description here" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="./css/styles.css" rel="stylesheet">
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="./img/favicon.png">
</head>
<body>
<div class="container">
  <h1>Hello, world!</h1>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="./js/respond.min.js"></script>
<script src="./js/scripts.js"></script>
</body>
</html>

这里是style.css:

and here is the style.css:

@media only screen and (max-width: 38.75em) {
body {
    background: green;
}
}

问候

推荐答案

https:// github。 com / scottjehl /回应#cdnx-domain-setup

CDN / X-Domain设置

CDN/X-Domain Setup

Respond.js的工作方式是通过AJAX请求CSS的原始副本,因此如果您在CDN(或子域)上托管样式表,则需要上传代理页面以启用跨域通信。

Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.

有关演示,请参阅跨域/ example.html:

See cross-domain/example.html for a demo:

Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your origin domain
Reference the file(s) via <link /> element(s):

<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>

如果您遇到跨域设置问题,请确保respond-proxy.html不有一个查询字符串附加到它。

If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.

注意:非常感谢@doctyper在跨域代理中的贡献!

Note: HUGE thanks to @doctyper for the contributions in the cross-domain proxy!

这篇关于在ie8及以下使用twitter bootstrap响应.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆