1：IE9以下支持html5新元素方法:让ie浏览器支持html5新标签的解决方法(使用html5shiv)
---------------------------------------------------------------------------------------------------------------
2: IE9以下不支持media query，我们需要使用 media-queries.js 或者 respond.js 实现ie浏览器对media query的支持。
可以使用css3-mediaqueries.js来解决浏览器不支持media queries的问题。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]—>-----------------------------------------------------------------------
3：CSS Media Queries
这一技巧可以创建自适应的设计，可以根据 viewport 的宽度重写布局的css。
@media screen and (max-width: 560px) { #content { width: auto; float: none; } #sidebar { width: 100%; float: none; } } -------------------------------------------------------------4：弹性图片
使用max-width:100% 和 height:auto，可以让图片变得更加弹性。
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } ----------------------------------------------------------------5：弹性的内嵌视频
使用width:100% 和 height:auto，可以让内嵌视频变得更加弹性。
.video embed, .video object, .video iframe { width: 100%; height: auto; }------------------------------------------------------------------
6：Webkit字体大小调整
使用-webkit-text-size-adjust:none，在iphone上禁用字体大小调整。
html { -webkit-text-size-adjust: none; }----------------------------------------------------------------------
7：设置iPhone Viewport 和 Initial Scale 下面的语句使用meta标签设置viewport 和 inital scale。
<meta name="viewport" content="width=device-width; initial-scale=1.0"><参考：http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries>
转载于:https://www.cnblogs.com/ChandlerVer5/p/responsive-design.html
相关资源：JAVA上百实例源码以及开源项目