`
yuyongkun4519
  • 浏览: 44862 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

HTML5 respond.js 解决IE6~8的响应式布局问题

 
阅读更多
响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。

  那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js。文件下载地址:https://github.com/scottjehl/Respond。

  友情提示各位朋友,关于respond.js的使用,有一些需要注意的地方,一旦不注意,在IE6-8中就无法显示出来。

一、书写基本样式

要想实现响应式布局,首先需要书写基本的响应式布局的样式。
复制代码
html,body {
    height: 100%;
}
@media only screen and (min-width: 480px){
    body {
        background: yellow;
    }
}
@media only screen and (min-width: 640px) and (max-width: 1024px) {
    body {
        background: green;
    }
}
@media screen and (min-width: 1024px){
    body {
        background: blue;
    }
}
复制代码
二、插件原理

接下来,需要理解respond.js的实现思路:
第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中;
第二步,遍历数组,并一个个发送AJAX请求;
第三步,AJAX回调后,分析response中的media query的min-width和max-width语法(注意,仅仅支持min-width和max-width),分析出viewport变化区间对应相应的css块;
第四步,页面初始化时和window.resize时,根据当前viewport使用相应的css块。
三、核心结论

那么此时,就可以根据基本的实现思路,得到一些书写代码时要注意的地方:
1、需要启动本地服务器(localhost),不能使用普通本地的url地址(file://开头);
2、需要外部引入CSS文件,将CSS样式书写在style中是无效的;
3、由于respond插件是查找CSS文件,再进行处理,所以respond文件一定要放置在CSS文件的后面
4、另外,虽然把respond放置在head里还是在body后面都能够实现,但是建议放置在head中(具体原因在下面的文档提示中有提到)
5、最好不要为CSS设置utf-8的编码,使用默认(原因详见下面的文档提示部分)

四、文档提示

在官方文档当中的一些提示:
1、越早的引入respond.js文件,也就越可能避免IE下出现的闪屏。
2、不支持嵌套的媒体查询
3、utf-8的字符编码对respond.js文件的运行有影响
官方API原文:if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.
基本含义就是:utf-8格式的CSS文件字符编码会对插件造成影响。
但是在我使用IE6-8进行测试的时候,都能够正常显示(无论是在css文件中增加charset设置还是在link标签中增加charset设置)。因此,并不是太清楚这个位置bug的含义。
4、跨域可能会出现闪屏(还没有测试,具体情况不详)

五、实例demo

html文件部分
复制代码
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5-响应式布局--respond.js-独行冰海</title>
    <link rel="stylesheet" href="test.css" charset="utf-8">
    <script src="respond.min.js"></script>
</head>
<body>
    <div class="wrap" id="con">
        让IE6~8支持响应式布局——独行冰海
    </div>
</body>
</html>
复制代码


注意:respond.min.js或者respond.src.js都可以使用,在上面给出的下载地址中下载即可。CSS部分就是最上面的那段代码。

显示效果(IE6,IE7-8的显示效果也是没有问题的,在此就不贴图处理了):





有待研究
官方文档中尚未解读清晰的内容(主要是不太清晰如何应用)
<!-- 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>


其他的支持响应式布局的插件-css3-mediaqueries-js
css3-mediaqueries-js官方文档和demo都没有,相对于respond.js css3-mediaqueries-js支持几乎所有的media query的语法。会出现闪屏。并不是很推荐使用,虽然能够支持全部的mediaqueries,但min-width和max-width其实就可以满足我们对响应式布局的需要。


CDN的支持

考虑到IE9是支持CSS3的,所以直接在HTML页面的head标签中添加脚本引用即可:

<!--[if lt IE 9]><script src = "http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
分享到:
评论

相关推荐

    js解决IE6~8的响应式布局问题

    响应式布局,理想状态是,对PC/移动...那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js。关于respond.js的使用,有一些需要注意的地方,一旦不注意,在IE6-8中就无法显示出来。

    让bootstrap兼容IE8的respond.js

    `respond.js`是一个轻量级的JavaScript库,由Jeffrey Way创建,它为不支持媒体查询的浏览器(如IE8)提供了后退支持,从而使得Bootstrap在这些浏览器上也能展现出响应式特性。 首先,我们需要理解响应式设计的概念...

    respond.js respond.min.js respond.src.js

    通过这种方式,Bootstrap 3等基于媒体查询的框架可以在这些老版本的IE浏览器上实现响应式布局。 在Bootstrap 3中,`respond.js`是实现跨浏览器兼容性的重要组件。Bootstrap 3的设计依赖于媒体查询来定义不同屏幕...

    excanvas.min.js html5.js html5shiv.js respond.min.js

    4. respond.min.js:这个库是用来在旧版IE中实现CSS3媒体查询(Media Queries)的支持,这是响应式网页设计的关键技术。响应式设计允许网页根据不同的设备和屏幕尺寸自动调整布局,提供最佳的用户体验。Respond.min....

    respond.min.js 1.4.2

    这是因为响应式布局依赖于CSS媒体查询,而JavaScript文件则处理交互和组件功能。这样可以确保先加载响应式规则,再加载交互元素。 为了更好地利用这个库,你需要了解如何编写和应用媒体查询。媒体查询的基本语法是 ...

    respond.js.

    "respond.js" 是一个JavaScript库,由Scott Jehl创建,它主要用于解决老版本Internet Explorer(尤其是IE6到IE8)对CSS3媒体查询不支持的问题。媒体查询是响应式设计的核心技术,允许开发者根据用户的设备特性,如...

    ie8支持响应式布局

    `html5shiv`是一个小巧的JavaScript文件,主要解决IE6到IE8浏览器对于HTML5新元素(例如`&lt;section&gt;`, `&lt;article&gt;`, `&lt;header&gt;`, `&lt;footer&gt;`等)无法识别并进行样式渲染的问题。在这些老版本的IE浏览器中,如果不借助...

    respond.min.js

    在这些老版本的IE浏览器中,响应式设计无法正常工作,因为它们不支持CSS3的媒体查询,这是实现响应式布局的核心技术。 "respond.min.js"的工作原理是动态注入CSS媒体查询,模拟对媒体查询的处理,使得IE8能够理解并...

    respond.js

    解决IE678不支持 Media 响应式布局的js

    html5shiv.min.js

    `html5shiv.min.js` 是一个JavaScript库,主要用于解决IE8及以下版本对HTML5新元素不支持的问题。在HTML5中,新增了很多语义化标签,如`&lt;header&gt;`, `&lt;nav&gt;`, `&lt;section&gt;`, `&lt;article&gt;`, `&lt;aside&gt;` 和 `&lt;footer&gt;`等,...

    解读一淘网(etao)首页响应式兼容ie6~ie8实现方法

    Respond.js是一个轻量级的JavaScript库,它允许IE6至IE8支持CSS3媒体查询,从而实现响应式设计。该插件的亮点在于其快速响应和低资源占用,但它的功能相对有限,仅能兼容主流的CSS3媒体查询语法。 另一方面,css3-...

    jquery.cookie.js,jquery.min.js

    4. **Respond.js**: `respond.min.js`是一个轻量级的JavaScript文件,用于为不支持CSS3媒体查询的浏览器(主要是旧版IE)提供响应式布局的支持。响应式设计能让网站根据用户的设备屏幕尺寸自动调整布局,从而提高在...

    详解html5 shiv.js和respond.min.js

    `respond.min.js`则填补了这个空白,它解析CSS中的Media Queries,并在不支持的浏览器中模拟其行为,使得这些老版本的浏览器也能实现响应式布局。 在实际使用中,通常我们会将这两个脚本通过条件注释的方式引入到...

    css适配ie的js代码程序

    2. `respond.min.js`: 这个文件是Scott Jehl创建的,用于在不支持CSS3媒体查询的IE6-8浏览器中提供响应式设计支持。响应式设计允许网页根据用户设备的屏幕尺寸和方向自动调整布局,而媒体查询是实现这一目标的关键...

    bootstrop兼容IE8的代码

    Bootstrap是一款广泛使用的前端框架,由Twitter开发,旨在提供一套简洁、直观、强大的工具,用于构建响应式布局和移动设备优先的Web项目。然而,Bootstrap原生版本并不支持Internet Explorer 8(IE8)及以下版本,...

    ie8以下支持html5

    为了解决这个问题,我们可以引入respond.min.js。这个脚本提供了对CSS3媒体查询的兼容性支持,使得网站可以自适应不同屏幕大小,无论是在桌面还是移动设备上都能提供良好的视觉体验。 在使用html5shiv和respond.min...

    bootstrap-ie8_ie9.rar

    2. ** HTML5shiv **:这是一个用于IE6-IE9的JavaScript解决方案,用于让这些旧版浏览器识别和应用HTML5的新元素。Bootstrap使用了许多HTML5元素,没有这个库,这些元素的样式可能无法正确应用。 3. ** CSS ...

    让ie6,7,8支持canvas,css3等主流html5技术

    这段代码会在IE9及以下版本加载`html5shiv`(用于渲染HTML5新元素)和`respond.min.js`(用于响应式设计的媒体查询 polyfill)。 5. **jQuery和库**: 使用jQuery可以帮助简化跨浏览器的JavaScript开发,许多jQuery...

Global site tag (gtag.js) - Google Analytics