当前位置:朝夕网 » 数码科技 » 响应式网站不兼容IE内核?加入这行代码即可解决

响应式网站不兼容IE内核?加入这行代码即可解决

要知道在微软提供的IE浏览器问世的前夕是没用响应式网站的,那么要想在IE上浏览响应式网站会怎么样呢?大家都知道,自适应一般采用@media的媒体查询方式进行,虽然大多数浏览器都支持,但IE的老版本即IE9以下都是不支持媒体查询的。这时,我们

大家在第一次做网站的时候ie浏览器打不开未响应,一般都是拿别人的模板来直接用,很少有人会为自己的个人网站做个模板,甚至是从头到尾都自己写代码的。特别是现在最为流行的响应式网站,不是专业的写起来是相当的麻烦,而且小问题多多,比如今天就要说到的问题。要知道在微软提供的IE浏览器问世的前夕是没用响应式网站的,那么要想在IE上浏览响应式网站会怎么样呢?

大家是不是经常在浏览网页的时候出现下图这样的情况

出现这个问题的原因是什么呢?细心的朋友就会发现在上图的浏览器地址栏后面有个IE的图标,这就表示我们浏览这个网页是通过IE的内核浏览的。大家都知道ie浏览器打不开未响应,自适应一般采用@media的媒体查询方式进行,虽然大多数浏览器都支持,但IE的老版本即IE9以下都是不支持媒体查询的。这时,我们就需要为IE9以下版本的浏览器提供媒体查询支持,经过大量百度,终于找到了方法。

使用respond.min.js可以为IE9以下版本提供媒体查询支持。资源百度上有很多,这里就不提供了,以免违反规则。

在使用respond.min.js的时候有几个需要注意的地方:

respond.min.js只能识别网页地址是开头的网址,它只会给开头的网页提供媒体查询支持,我们在本地编写代码调试的时候一般是使用file:///形式浏览的。

解决办法:开启本地服务器,(打开PHPstudy使用localhost或者127.0.0.1访问就好了)或者上传到云端服务器。

提供respond.min.js支持的代码必须在你加载css样式之后。也就是说先加载你的css样式,在加载respond.min.js。使用方法如下:

做到以上两点,基本上你的网页就能成功为IE9以下版本用户提供媒体查询了。效果如下图所示:

本文到此结束,希望对大家有所帮助!

免责声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如有侵权行为,请第一时间联系我们修改或删除,多谢。朝夕网 » 响应式网站不兼容IE内核?加入这行代码即可解决