首页 > 代码库 > 解决响应式布局下兼容性的问题

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

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

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

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

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

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

针对IE8以下的兼容性,又再次引用了另外一个插件:

<!--[if lte IE 8]><script type="text/javascript" src="http://www.mamicode.com/JS/respond.min.js"></script><![endif]-->

respond.js大家可以在网上搜索到。应用后,在IE8以下的浏览器,如果判断了是窄屏幕,则会加载调整的样式。当然,有一个瑕疵,由于是JS载入后判断,所以可能会有延迟,稍微闪屏。不过这都是可以接受。
到这里,你以为一切貌似都解决了?
BUT...
你错了,我上传后发现另外一个坑爹的问题,页面上引用了瀑布流。载入页面后瀑布流先应用了样式,respond载入之后又判断是窄屏,再次应用了960的样式,这样就导致了瀑布流布局错乱。
解决这个问题的办法:使用jquery的resize事件,判断容器宽度变化后,重新执行瀑布流。
类似的问题都可以这么解决。

IE6\IE7\IE8测试正常,至于IE9以上支持media query,不需要额外的JS去判断。