对于CSS3 Media Query,IE9之前的版本无法提供支持。目前的最佳解决方法是通过css3-mediaqueries.js来帮助这些旧版本的IE浏览器支持CSS3 media queries。
使用代码如下:
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
css3-mediaqueries.js见附件
官方网站:
https://code.google.com/p/css3-mediaqueries-js/
接下来就可以写CSS3 Media Query样式代码了
/************************************************************************************ 小于980 *************************************************************************************/ @media screen and (max-width: 980px) { /* pagewrap */ #pagewrap { width: 95%; } /* content */ #content { width: 60%; padding: 3% 4%; } /* sidebar */ #sidebar { width: 30%; } #sidebar .widget { padding: 8% 7%; margin-bottom: 10px; } /* embedded videos */ .video embed, .video object, .video iframe { width: 100%; height: auto; min-height: 300px; } } /************************************************************************************ 小于650 *************************************************************************************/ @media screen and (max-width: 650px) { /* header */ #header { height: auto; } /* search form */ #searchform { position: absolute; top: 5px; right: 0; z-index: 100; height: 40px; } #searchform #s { width: 70px; } #searchform #s:focus { width: 150px; } /* main nav */ #main-nav { position: static; } /* site logo */ #site-logo { margin: 15px 100px 5px 0; position: static; } /* site description */ #site-description { margin: 0 0 15px; position: static; } /* content */ #content { width: auto; float: none; margin: 20px 0; } /* sidebar */ #sidebar { width: 100%; margin: 0; float: none; } #sidebar .widget { padding: 3% 4%; margin: 0 0 10px; } /* embedded videos */ .video embed, .video object, .video iframe { min-height: 250px; } } /************************************************************************************ 小于480 *************************************************************************************/ @media screen and (max-width: 480px) { /* disable webkit text size adjust (for iPhone) */ html { -webkit-text-size-adjust: none; } /* main nav */ #main-nav a { font-size: 90%; padding: 10px 8px; } }
还可以使用jquery插件MediaQueries
官方网站:http://archive.plugins.jquery.com/project/MediaQueries
相关推荐
IE8及低版本浏览器不支持CSS3 media queries的解决方法
NULL 博文链接:https://liuna718-163-com.iteye.com/blog/1832739
整理了一套用到CSS3的各种知识,包括各个选择器的使用,各个属性的使用,属性的区别,实际开发中需要注意的问题,以及如何解决这些问题等等
iecss3.htc css3圆角支持文件
下面小编就为大家带来一篇css3 media 响应式布局的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。 让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,...
主要介绍了css3动画效果抖动解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
如何在IIS环境下部署httpswin2008 IIS7无后缀URL部署问题 MVC4 MVC URL映射windows2003 IIS6 部署MVC3和MVC4程序的方法IIS 7.5 部署ASP.NET失败的解决方法IIS部署asp.net报404错误的解决方法win2003 sp2+iis 6.0上...
js条件下多次触发同一个css3动画的解决方案demo,配合blog一起使用。js条件下多次触发同一个css3动画的解决方案demo,配合blog一起使用。
css ie6 fiexd属性解决方法
主要介绍了CSS3实现文本垂直排列的方法,也就是运用了CSS的writing-mode属性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
chm版下载:CSS参考手册v1.2.2 坚持了近半年,这本全新的CSS参考手册终于面世了。内容涵盖CSS2.1和大部分CSS3。... 手册的在线版也适当的使用了一些CSS3,感兴趣的朋友据此可以直接体验到CSS3的部分特征
link href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen” /> <link href=”css/print.css” rel=”stylesheet” type=”text/css” media=”print” /> 以上两行代码是引入...
JavaScript依据CSS的Media Queries来推断扫瞄设备的方法_.docx
本地页面css样式和外部的js加载不上的解决方法!
<link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="../css/print.css" type="text/css" media="print"> <!--[if IE]> ...
Work with lists, tables, and media in CSS3 Employ CSS3 best practices The CSS3 Quick Syntax Reference: A Pocket Guide to the Cascading Style Sheets Language is a 150-page syntax reference to the ...