解决响应式布局下兼容性的问题

响应式布局主要是为了在各类终端中能正常显示界面，主要是面向的手机、平板等用户的网站比较多采用，而面向PC端的网站不多使用，由于主流的显示器都比较大了，并且大多数网站都采用1000宽度，针对手机端等每每又会另外开发一套前端。由于响应式布局兼容性并很差，在IE8如下的浏览器中没法实现效果。你们宁愿采用1000PX如下宽度的页面。

下面我提供一个办法解决这个问题。

公司最近新的项目中采用了宽屏1200PX的设计，这样就产生了一个问题，在1024*768的显示器上没法正常显示。

因此我额外的写了调整的样式，针对小于1200PX宽度的显示屏，统一采用960宽度的样式。

<link rel="stylesheet" type="text/css" media="screen and (max-width:1200px)" href="css/cloud_960px.css">

针对IE8如下的兼容性，又再次引用了另一个插件：

<!--[if lte IE 8]>
<script type="text/javascript" src="JS/respond.min.js"></script>
<![endif]-->respond.js你们能够在网上搜索到。应用后，在IE8如下的浏览器，若是判断了是窄屏幕，则会加载调整的样式。固然，有一个瑕疵，因为是JS载入后判断，因此可能会有延迟，稍微闪屏。不过这都是能够接受。到这里，你觉得一切貌似都解决了？BUT...你错了，我上传后发现另一个坑爹的问题，页面上引用了瀑布流。载入页面后瀑布流先应用了样式，respond载入以后又判断是窄屏，再次应用了960的样式，这样就致使了瀑布流布局错乱。解决这个问题的办法：使用jquery的resize事件，判断容器宽度变化后，从新执行瀑布流。相似的问题均可以这么解决。IE6\IE7\IE8测试正常，至于IE9以上支持media query，不须要额外的JS去判断。