Respond.js让IE6~8支持CSS3媒体查询响应式布局 - 资源分享

Respond.js让IE6~8支持CSS3媒体查询响应式布局

发布于 2017-07-27 字数 2885 浏览 1855 评论 0

响应式设计似乎是现在网站的标配,根据不用的尺寸的显示屏,自动调整网页元素的大小和布局,IE浏览器直到IE9才支持响应式中的媒体查询,但是现在任然有很多用户使用的IE9以下的浏览器,使我们不得不进行IE低端浏览器的考虑。

Respond.js让IE6~8支持CSS3媒体查询

Respond.js 就是让不支持 CSS3 Media Query 的浏览器包括IE6-IE8等其他浏览器支持媒体查询,支持我们现在的响应式设计布局。

使用方法

Respond.js 不需要被调用和初始化,只需要引入页面即可,但是引入的位置有点讲究:

1、要想实现响应式布局,首先需要书写基本的响应式布局的样式。

@media screen and (min-width: 480px){
    ...styles for 480px and up go here
}

2、在 CSS 的后面引入 respond.min.js 文件,官方说的是越早引入越好,在IE下面看到页面闪屏的概率就越低,因为最初 CSS 会先渲染出来,如果 respond.js 加载得很后面,这时重新根据 Media Query 解析出来的 CSS 会再改变一次页面的布局等,所以看起来有闪屏的现象。

插件实现原理

下面是插件的工作原理,了解了工作原理能够让我们更好的使用这个插件:

  1. 将 head 中所有外部引入的CSS文件路径取出来存储到一个数组当中
  2. 遍历数组,并一个个发送AJAX请求
  3. AJAX 回调后,分析 Response 中 Media Query 的 min-width 和 max-width 语法,注意插件仅仅支持 min-width 和 max-width,分析出 viewport 变化区间对应相应的 CSS 块
  4. 页面初始化时和 window.resize 时,根据当前 viewport 使用相应的 CSS 块

也就是说插件会多请求一次CSS文件,如果你的网站IE低版本的用户很少,那还是要考虑下使用这个插件是否值得。

使用结论

那么此时,就可以根据基本的实现思路,得到一些书写代码时要注意的地方:

  1. 需要使用远程的 URL 地址,不能使用普通本地的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 文件的运行有影响
  4. 跨域可能会出现闪屏

插件总结

优点

  • 压缩后仅1k
  • 不跨域时性能很好
  • 只需引入 respond.js 通用易用

缺点

  • 仅支持 media query 的 min-width 和 max-width(用于响应式够用)
  • 支持跨域,虽然配置有点麻烦,实现跨域代价高而且有闪屏体验欠佳。

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0