前言
HTML5新增了很多语义化的标签，赋予网页更好的意义和结构。一个网站要做到一套代码多种终端设备都美观的展现，就需要使用CSS3多媒体查询Media Query做成响应式的。
HTML5标签兼容方案
使用HTML5标记的优势
HTML5提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用。让你在拥有更简洁的代码的同时，也有利于SEO。
关于HTML5结构
文章一：http://imsole.net/html5/ele.html
文章二：http://www.xuanfengge.com/html5-structure.html
兼容解决
HTML5是在低版本的浏览器（IE8-）的兼容是有限的，类似很多结构性的标签<header>、<section>、<footer>等在IE8以下不会被识别。有什么方法能实现兼容呢？在高级浏览器能使用上这些标签，增强语义化；而在低级浏览器（包括IE6）上表现不会出错。那就需要引入html5.js这个文件。
如何使用
既然是只有IE低版本需要使用，那就需要做个判断。
|
1 2 3 |
<!--[if lte IE 8]> <script type="text/javascript" src="./js/html5.js"></script> <![endif]--> |
需要注意的地方是，这段代码需要添加在head标签内，而不是最后写在前面即底部，因为IE浏览器必须在元素解析签知道这些元素。
响应式兼容方案一
Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design）。
这样子，IE6-8也能良好的展现,支持在浏览器中使用CSS3媒体查询功能.
使用方法
|
1 2 3 |
<!--[if lte IE 8]> <script type="text/javascript" src="./js/respond.min.js"></script> <![endif]--> |
响应式兼容方案二
IE8 或者更低的版本不支持 CSS3 媒体查询，但通过添加脚本 css3-mediaqueries.js 来实现这一功能
|
1 2 3 |
<!--[if lt IE 9]> <script type="text/javascript" src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script> <![endif]--> |
源文件下载
html5.js：http://xuanfengge.com/demo/201403/fuck-IE/html5.js
respond.min.js：http://www.xuanfengge.com/demo/201403/fuck-IE/respond.min.js
希望大家发表自己的看法！我先赞成一下