这个月做的中山东区学校的项目中，要适应两个屏幕，有两个方法，一个是js判断屏幕分辨率大小，再给容器加一个class类区分，这个方法可以兼容所有的浏览器，还有一个方法就是现在流行的媒体查询（CSS3 Media Query），可惜媒体查询不支持ie8及以下的浏览器，经百度，得知有个Respond.js插件可以使其兼容

Respond.js

一个快速、轻量的关于 css3 Media Qurery 的媒体特性(min/max-width)的polyfill(用来兼容IE6-8或更多的浏览器)，它的目标是使得那些不支持CSS3 Media Queryes特性的浏览器能够支持响应性设计，尤其是小于等于8的ie浏览器。 

Respond.js缺陷

1.脚本仅仅对min-width 和 max-width media queries 以及所有的media types(screen,print,等等)不支持的浏览器提供支持，引用Respond.js脚本，放到所有css文件之后（它越早运行，ie用户看到非media内容的闪烁的几率越小）。

2.由于浏览器的安全机制，Respond.js 不能在通过 ;协议（打开本地HTML文件所用的协议）访问的页面上发挥正常的功能。如果需要测试 IE8 下面的响应式特性，务必通过 http 协议访问页面

3.Respond.js 不支持通过 @import 指令所引入的 CSS 文件。例如，Drupal 一般被配置为通过 @import 指令引入CSS文件，Respond.js 对其将无法起到作用。

4.宽域问题，如果 Respond.js 和 CSS 文件被放在不同的域名或子域名下面时需要一些额外的设置，参考

不同屏幕效果图

源码地址

/Upload/History/Dtop/UploadFiles/upload/201412311558033185.rar