响应式设计

第一步：

 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">  

IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。

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

UNDERSTAND HTML5 TAGS

1 2 3

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

第二步：

在做布局前要想清楚不同的尺寸显示的样式，尽量方便于更改移动端的设计。

第三步：

使用 @media

check:

www.responsinator.com

GENERAL SIZE:

• iPhone 3+4 portrait 320 x 480
• iPhone 3+4 landscape 480 x 320
• iPhone 5 portrait 320 x 568
• iPhone 5 landscape 568 x 320
• Android portrait 240 x 320
• Android landscape 320 x 240
• Android (Samsung Galaxy) portrait 380 by 685 (equivalent desktop resolution)
• Android (Samsung Galaxy) landscape 685 by 380 (equivalent desktop resolution)
• iPad portrait 768 x 1024
• iPad landscape 1024 x 768
• Kindle portrait 600 x 1024
• Kindle landscape 1024 x 600