首页 > 代码库 > 解决响应式布局下兼容性的问题
解决响应式布局下兼容性的问题
响应式布局主要是为了在各种终端中能正常显示界面,主要是面向的手机、平板等用户的网站比较多采用,而面向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去判断。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。