让 IE9 以下的浏览器支持 Media Queries
1. 如何让 IE9 以下的浏览器支持 css3 的media query 需要用到的 min-width/max-width 属性
css3 的媒体查询 IE 浏览器的支持程度是从 IE9开始支持,那么要想 IE6~IE8 的浏览器支持 媒体查询可以使用 js 来辅助支持。主要可以使用以下两个 辅助 js 文件中的其中一个即可:
1). respond.js
可以从:http://www.bootcdn.cn/respond.js/ 上 通过 cdn 引入
2).css3-mediaqueries.js
可以上 github 上下载然后引入;
对于使用上述的两个 pollify 文件,其优缺点可以在链接:http://stackoverflow.com/questions/12837568/css3-mediaqueries-js-vs-respond-js 看到详细对比。
2. 如和在页面中引入上述两个文件
为了减少页面的 http 请求数量,对于支持 css3 媒体查询的浏览器,则不引入上述的 js 文件,反之则引入。那么如何做到呢,可以参考文章:
http://www.cnblogs.com/thinkingthigh/archive/2013/06/19/3144239.html
3. 有时候会发现,引入了 respond.js, 但是却并没有实现 css3的媒体查询效果呀,这怎么解决呢?可以参考文章:
http://www.cnblogs.com/aimyfly/p/4286626.html
让 IE9 以下的浏览器支持 Media Queries的更多相关文章
- IT兄弟连 HTML5教程 设置IE9以下版本浏览器支持HTML5
HTML2.HTML5刚发布时由于各浏览器之间的标准不统一,开发者的时间都浪费在解决Web浏览器之间的兼容性上.但由于W3C和WHATWG对HTML5新版本的制定,以及近年来对HTML5的使用,再加上 ...
- 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- css3的媒体查询(Media Queries)
我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...
- CSS3学习教程:Media Queries详解
说起CSS3的新特性,就不得不提到 Media Queries . Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...
- CSS3 Media Queries 详解
说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...
- CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...
- 【css】CSS3 Media Queries 详解【转】
说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...
- 第11章 Media Queries 与Responsive 设计
Media Queries--媒体类型(一) 随着科学技术不断的向前发展,网页的浏览终端越来越多样化,用户可以通过:宽屏电视.台式电脑.笔记本电脑.平板电脑和智能手机来访问你的网站.尽管你无法保证一个 ...
随机推荐
- BZOJ3676 APIO2014回文串(manacher+后缀自动机)
由于本质不同的回文子串数量是O(n)的,考虑在对于每个回文子串在第一次找到它时对其暴力统计.可以发现manacher时若右端点移动则找到了一个新回文串.注意这样会漏掉串长为1的情况,特判一下. 现在问 ...
- POJ3258-River Hopscotch-二分答案
一条河里有一串石头,给出石头间的间距,让你去掉m个石头,使最短间距最大. 二分答案,对于每一种mid,判断要不要删除这块石头.然后逼近答案. #include <cstdio> #incl ...
- Sql 标识列 增长1000
Sql 标识列 增长1000 的解决办法: 1. Open "SQL Server Configuration Manager" 2. Click "SQL Server ...
- python 模块 - 序列化 json 和 pickle
1,引入 之前我们学习过用eval内置方法可以将一个字符串转成python对象,不过,eval方法是有局限性的,对于普通的数据类型,json.loads和eval都能用,但遇到特殊类型的时候,eval ...
- BZOJ 4499: 线性函数
4499: 线性函数 Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 177 Solved: 127[Submit][Status][Discuss] ...
- 【ARC102E】Stop. Otherwise...(容斥原理,动态规划)
[ARC102E]Stop. Otherwise...(容斥原理,动态规划) 题面 AtCoder 有\(n\)个骰子,每个骰子有\(K\)个面,上面有\(1\)到\(K\).骰子都是一样的. 现在对 ...
- 【BZOJ2299】[HAOI2011]向量(数论)
[BZOJ2299][HAOI2011]向量(数论) 题面 BZOJ 洛谷 题解 首先如果我们的向量的系数假装可以是负数,那么不难发现真正有用的向量只有\(4\)个,我们把它列出来.\((a,b)(a ...
- 洛谷 P2812 校园网络【[USACO]Network of Schools加强版】 解题报告
P2812 校园网络[[USACO]Network of Schools加强版] 题目背景 浙江省的几所OI强校的神犇发明了一种人工智能,可以AC任何题目,所以他们决定建立一个网络来共享这个软件.但是 ...
- bower介绍
一. bower是什么? bower是twitter推出的第三方依赖管理工具.其特点是对包结构没有强制规范,也因此bower本身并不提供一套构建工具,它充当的基本上是一个静态资源的共享平台.它可用于搜 ...
- 洛谷P5206 数树
题意: task0,给定两棵树T1,T2,取它们公共边(两端点相同)加入一张新的图,记新图连通块个数为x,求yx. task1,给定T1,求所有T2的task0之和. task2,求所有T1的task ...