IE8以下不支持css3 media query的解决办法

针对IE8以下不支持css3的media query,可以使用response.js解决

下载地址:https://github.com/scottjehl/Respond/

这里有一篇关于其实现原理的文章:http://caibaojian.com/respondjs.html

引用时的注意点:

  •   不可将媒介查询代码写在html内部,因为response是通过ajax分析link引入的css文件,故html里面的样式将被忽略。
  • 引入文件需在css引入之后
<!--[if lte IE 8]>
        <script src="js/respond.min.js"></script>
<![endif]-->

可与针对IE的html条件注释一起使用,减少其他原生支持media query的浏览器的资源请求。

IE8以下不支持css3 media query的解决办法

时间: 2024-10-13 17:46:48

IE8以下不支持css3 media query的解决办法的相关文章

Respond.js让IE6-8支持CSS3 Media Query

Bootstrap里面就引入了这个js文件,从名字看出来是自适应的兼容.打开IE看了一下,效果挺好的,自适应的效果挺好的.Respond.js让不支持CSS3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询. 使用方式 官方demo地址:http://scottjehl.github.com/Respond/test/test.html 1.在css中正常用 min/max-width media queries @media screen and (min-width:

IE8及低版本浏览器不支持CSS3 media queries的解决方法

问题:IE8及其以下低版本IE浏览器在缩小窗口时,UI没有按照相应的要求显示窗口缩小时对应的布局:其他浏览器正常. 定位过程: 其实开始拿到问题时是无从下手,不知所以然,根本就没听说还有media这个CSS属性,就更不知道它的功能了.但是对于解决UI问题,有自己的一套思路,就是首先要思考为什么会错误以及为什么没有错误两个方面,然后针对这两个方面的疑问把html或js或css文件简化再简化,修改再修改,查看UI变化,从而缩小问题范围,最后找出问题根源. 如此我就想为什么其他浏览器界面布局没有问题呢

让IE支持CSS3 Media Query实现响应式Web设计

如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况下,固定宽度的设计方案将会显得越发不合理.页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整.接下来,我们将了解一下怎样通过html5和css3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式web设计方案.我们需要在页面中调用css3-med

响应式布局(二)—— CSS3 Media Query

响应式布局有三种实现方式: CSS3 Media Query 原生 JS 代码 第三方开源框架(最常见的有 bootstrap) CSS3 -- Media Query 1. 媒体查询实现方式 方式一:styleSheet样式表中的写法: 如:<style>标签中使用@media <style> @media screen and (min-width: 480px) { body{background: blue;} } </style> 方式二:<link&g

CSS3 Media Query实现响应式Web设计(针对不同移动设备宽度)

如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况下,固定宽度的设计方案将会显得越发不合理.页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整.接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案 范例效果预览 首先,我们来看看本篇范

CSS3 Media Query实现响应Web设计(宽度为不同的移动设备)

现在的屏幕分辨率.小到320px(iPhone),大到2560px或甚至更高(大显示屏).范围内变化很大.除了使用传统的台式机.用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面. 这样的情况下,固定宽度的设计方案将会显得越发不合理.页面须要有更好的适应性,其布局结构要做到依据不同的设备及屏幕分辨率进行响应调整.接下来,我们将了解一下如何通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案 范例效果预览 首先,我们来看

[转]CSS3 Media Query实现响应布局

讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局). 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端—

使用CSS3 Media Query技术适配Android平板屏幕分辨率和屏幕密度

使用HTML5开发移动应用时需要适配各种Android平板设备的分辨率和屏幕密度,过程实在很麻烦,最后的解决办法是使用css media query,同时匹配分辨率和屏幕密度,在每个设备上进行兼容性测试,最终保证在多数Android平板上都能较好的显示. 一个典型的针对设备的Css Media Query写法如下,可以保证页面高度充满屏幕,简单的设置height:100%是不行的. //SAMSUNG N5100, Nexus7 1, @media only screen and (min-de

Windows下Apache配置SSL以支持https及出错的解决办法

步骤一:安装apache,使其支持SSL,并安装php 1.安装配有SSL模块的apache,apache_2.2.8-win32-x86-openssl-0.9.8g 2.配置apache以支持SSL: 1)打开apache的配置文件conf/httpd.conf LoadModule ssl_module modules/mod_ssl.so Include conf/extra/httpd-ssl.conf 去掉两行前面的# 2)注意修改httpd-ssl.conf 文件里的两个字段: S