浏览器兼容问题系列---使IE支持CSS3 Media Quary
兼容是一件很让前端攻城师头疼的事情,笔者今天在做一个Demo的时候就碰到了一个问题(大牛就不要拍砖了,谢谢!)
经常做移动互联网前端的攻城师想必对于css3 media quary已经很熟悉了,但是碰到IE这种非标准内核的浏览器来说就不能接受了,
接下来直接将解决方案吧:
很简单下载js库respond.js引入到你的页面就可以了,但这里需要注意的两件事情是(也是笔者在实际操作的时候碰到的):
1,respond.js引入位置需要在引入media css这个之后,如下代码:
<link rel="stylesheet" media="screen and (min-width: 768px)" href="css/pc.css" />
<script src="js/respond.src.js" type="text/javascript"></script>
2,如果你的系统是新安装的系统,IE浏览器没有进行更新,那么笔者建议您将IE更新到最新版本(多的就不说了,一试便知)
关于respond.js的详解:
http://caibaojian.com/respondjs.html
谢谢前辈的贡献!
浏览器兼容问题系列---使IE支持CSS3 Media Quary的更多相关文章
- Respond.js – 让 IE6-8 支持 CSS3 Media Query
Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width ...
- 让IE支持CSS3 Media Query实现响应式Web设计
如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况 ...
- Respond.js让IE6-8支持CSS3 Media Query
原文地址:http://caibaojian.com/respondjs.html 使用方式 官方demo地址:http://scottjehl.github.com/Respond/test ...
- Respond.js – 让不懂爱的 IE6-8 支持 CSS3 Media Query
respond.min.js <script src="js/respond.min.js"></script> respond.min.js代码: /*! ...
- 老式浏览器兼容HTML5和CSS3的问题
1.让老式浏览器支持HTML5 HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因 ...
- HTML-HTML5+CSS3权威指南阅读(二、让IE支持HTML5标签及对CSS3 Media Query的兼容)
兼容解决 HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标 签<header>.<section>.<footer>等在IE8以下不会被识 ...
- 解决浏览器background-image属性不支持css3动画
问题 最近在使用background-image属性来实现css3的逐帧动画时,碰到了个问题.在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上 ...
- 使ie6/7/8支持css3的方法
使用PIE.htc让IE6\7\8支持CSS3部分属性 包括圆角,阴影,背景渐变等效果 下载地址 http://css3pie.com/download/ 需要注意几点的是 第一,pie是以相对页面h ...
- IE浏览器兼容方案
1.使用高版本渲染模式 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 2.css hack (1)条件注释 ...
随机推荐
- sirius的学习笔记(2)
原文来自网络,侵权删 if both values of in a or expression are true ,Python will select the first one, and the ...
- mac系统在控制台中ping网址提示不能解析host
更换dns就好了 系统偏好设置——网络——dns 换成 8.8.8.8 114.114.114.114 也可以参考v2ex的dns http://www.guomii.com/posts/5315
- HelloWorld和数据绑定
HelloWorld和数据绑定 目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. An ...
- ios App 加急审核
下面进入正题.提交完成后进入加急审核页面. 链接:https://developer.apple.com/appstore/contact/appreviewteam/index.html 在i wo ...
- 滚珠菜单动效-b
原型从网上找的,动效使用了CAAnimation和UIDynamic物理引擎. gitHub :https://github.com/BearRan/FlowMenuAnimation 大致步骤如 ...
- Oralce11 客户端的安装和 PlSql Developer 的配置
关于Oracle11服务器端安装时的配置问题我就不讲了,就是要安装DataBase1和DataBase2. 现在我来讲的是Oralce11 客户端的安装和PlSql的配置问题: 步骤一:选择图示,wi ...
- 论文阅读(2014-2)----The YouTube Video Recommendation System
这是谷歌youtube在2010的一篇文章,估计现在的思路有很多升级了,但是里面的知识点还是很不错的.主要讲youtube的个性化推荐思路.下面根据论文的结构我把我理解的思路整理如下,如果有问题,欢迎 ...
- XCODE7新变化之-test
Xcode 7新鲜出炉,一大早下载下来就安装上了,急急地体验一把.这几天公司给的任务是单元测试,那我们一起来用新版本做一次测试吧. 除了官方发布的下载链接地址,分享本人的xcode 7下载地址,大家不 ...
- IntelliJ IDEA14 安装
一.官网下载 IntelliJ IDEA的官网:https://www.jetbrains.com/idea/ 进入选择Get IntelliJ IDEA Now ,进入下载页:https://www ...
- PAT-乙级-1029. 旧键盘(20)
1029. 旧键盘(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 旧键盘上坏了几个键,于是在敲一段文字的 ...