这个JS库的诞生增加了老浏览器的自适应的兼容性,但我个人觉得用处不是很大。主要的缺点就是:JS没运行前的时候网页没变化,运行后网页就会闪一下子(改变布局),而且这个问题还不能完美解决,嫌丑的话用其他元素遮盖一下(贵族浏览器 23333)。

亮代码,挑毛病:

<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  1. 必须开启服务器环境
  2. 要部署的CSS文件比该JS先加载
  3. link元素的href属性必须在rel属性前面
  4. IE浏览器限制网页运行js脚本,需用户手动准许

实现原理:

  1. 匹配到head中所有的CSS的地址(可多个)
  2. 通过ajax获取CSS文件的内容
  3. 分析里面的@media的语法,把CSS代码分开
  4. 根据浏览器不同的宽调用不同的CSS代码

使用CDN加载respond脚本:

http://cdn.code.baidu.com/
http://www.bootcdn.cn/respond.js/