h5 移动端响应式兼容

HTML5.js

　　对于html5标签，IE9之前IE浏览器不支持<header>, <article>, <footer>, <figure>等html5新标签。可在html文档中添加 html5.js 文件将解决这一问题。

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 

CSS3 Media Query

　　包含 Media Queries Javascript文件

　　IE8和之前的浏览器不支持CSS3 media queries，可在页面中添加css3-mediaqueries.js来解决这个问题。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

　　

     包含 Media Queries CSS

　　创建media query所需的css，然后在页面中添加引用。

<link href="media-queries.css" rel="stylesheet" type="text/css">

CSS

　　设置html5元素为块状元素

　　下面的css将会把html5的元素（article, aside, figure, header, footer 等）设置为块元素。

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}