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

响应式布局主要是为了在各种终端中能正常显示界面，主要是面向的手机、平板等用户的网站比较多采用，而面向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去判断。

我这个办法有点笨，不知道有没有高人提供更高明的办法。

转载于:https://www.cnblogs.com/cnzlw/p/3596622.html