使用CSS3 Media Queries实现响应式设计

文章来源：http://bbs.html5cn.org/forum.php?mod=viewthread&tid=11516&extra=

  现在屏幕分辨率的范围很大，从 320px (iPhone) 到 2560px (大型显示器)，甚至更大。用户也不只是使用台式电脑访问web站点了，他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍，如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。

　　demo预览地址：http://webdesignerwall.com/demo/adaptive-design/final.html

　　demo下载地址：http://www.webdesignerwall.com/file/adaptive-design-demo.zip

　　第一次运行

　　在开始之前，我们可以查看 最终demo 来查看最终效果。调整你浏览器的大小，我们可以看到页面会根据视窗的大小自动调整布局。

　更多例子

你可以访问下面的地址，查看更多相关例子： WordPress themes。我设计了如下media queries： Tisa, Elemin, Suco, iTheme2, Funki, Minblr, 和 Wumblr。

　　概述

　　默认情况下，页面容器的宽度是980px，这个尺寸优化了大于1024px的分辨率。Media query用来检查 viewport 宽度，如果小于980px他会变为窄屏显示模式，页面布局将会以流动的宽度代替固定宽度。如果 viewport 小于650px，他会变为mobile显示模式，内容、侧边栏等内容会变为单独列布局方式，他们的宽度占满屏幕宽度。

　HTML代码　

　在这里，我不会介绍下面html代码中的细节。下面是布局页面的主框架，我们有一个“pagewrap”的容器包装了"header", "content", "sidebar", 和 "footer"。

1. <div id="pagewrap">
   
2. 
   
3.     <header id="header">
   
4. 
   
5.         <hgroup>
   
6.             <h1 id="site-logo">Demo</h1>
   
7.             <h2 id="site-description">Site Description</h2>
   
8.         </hgroup>
   
9. 
   
10.         <nav>
    
11.             <ul id="main-nav">
    
12.                 <li><a href="#">Home</a></li>
    
13.             </ul>
    
14.         </nav>
    
15. 
    
16.         <form id="searchform">
    
17.             <input type="search">
    
18.         </form>
    
19. 
    
20.     </header>
    
21.    
    
22.     <div id="content">
    
23. 
    
24.         <article class="post">
    
25.             blog post
    
26.         </article>
    
27. 
    
28.     </div>
    
29.    
    
30.     <aside id="sidebar">
    
31. 
    
32.         <section class="widget">
    
33.              widget
    
34.         </section>
    
35.                         
    
36.     </aside>
    
37. 
    
38.     <footer id="footer">
    
39.         footer
    
40.     </footer>
    
41.    
    
42. </div>

复制代码

HTML5.js

　　请注意，我在demo中使用了html5标签，不过IE9之前IE浏览器不支持<header>, <article>, <footer>, <figure>等html5新标签。可以在html文档中添加 html5.js 文件将解决这一问题。

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

复制代码

CSS
　　设置html5元素为块状元素

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

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

复制代码

css主体结构



　　在这里我也不会解释css文件的细节。页面主容器“pagewrap”的宽度被设置为980px。header被设置为固定高度160px。“content”的宽度为600px，靠左浮动。“sidebar”宽度设置为280px，靠右浮动。

1. #pagewrap {
   
2.     width: 980px;
   
3.     margin: 0 auto;
   
4. }
   
5. 
   
6. #header {
   
7.     height: 160px;
   
8. }
   
9. 
   
10. #content {
    
11.     width: 600px;
    
12.     float: left;
    
13. }
    
14. 
    
15. #sidebar {
    
16.     width: 280px;
    
17.     float: right;
    
18. }
    
19. 
    
20. #footer {
    
21.     clear: both;
    
22. }

复制代码

Step 1 Demo

　　我们可以通过demo查看当前效果。这时我们还没有使用 media queries，调整浏览器宽度，页面布局也不会发生变化。
CSS3 Media Query

　　你可以通过《HTML5实践 -- CSS3 Media Queries》了解更多信息。


　　包含 Media Queries Javascript文件


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

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

复制代码

包含 Media Queries CSS

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

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

复制代码

Viewport小于 980px(流动布局)

　　当viewport小于980px的时候，将会采用下面的规则：

• pagewrap = 宽度设置为 95%
• content = 宽度设置为 60%
• sidebar = 宽度设置为 30%
  

　　tips：使用百分比（%）可以使容器变为不固定的。

1. @media screen and (max-width: 980px) {
   
2. 
   
3.     #pagewrap {
   
4.         width: 95%;
   
5.     }
   
6. 
   
7.     #content {
   
8.         width: 60%;
   
9.         padding: 3% 4%;
   
10.     }
    
11. 
    
12.     #sidebar {
    
13.         width: 30%;
    
14.     }
    
15.     #sidebar .widget {
    
16.         padding: 8% 7%;
    
17.         margin-bottom: 10px;
    
18.     }
    
19. 
    
20. }

复制代码

Viewport小于 650px(单列布局)

　　当viewport小于650px的时候，将会采用下面的规则：

• header = 设置高度为 auto
• searchform = 重新设置 searchform 的位置 5px top
• main-nav = 设置位置为 static
• site-logo = 设置位置为 static
• site-description = 设置位置为 static
• content = 设置宽度为 auto (这会使容器宽度变为fullwidth) ，并且摆脱浮动
• sidebar = 设置宽度为 100%，并且摆脱浮动
  

1. @media screen and (max-width: 650px) {
   
2. 
   
3.     #header {
   
4.         height: auto;
   
5.     }
   
6. 
   
7.     #searchform {
   
8.         position: absolute;
   
9.         top: 5px;
   
10.         right: 0;
    
11.     }
    
12. 
    
13.     #main-nav {
    
14.         position: static;
    
15.     }
    
16. 
    
17.     #site-logo {
    
18.         margin: 15px 100px 5px 0;
    
19.         position: static;
    
20.     }
    
21. 
    
22.     #site-description {
    
23.         margin: 0 0 15px;
    
24.         position: static;
    
25.     }
    
26. 
    
27.     #content {
    
28.         width: auto;
    
29.         float: none;
    
30.         margin: 20px 0;
    
31.     }
    
32. 
    
33.     #sidebar {
    
34.         width: 100%;
    
35.         float: none;
    
36.         margin: 0;
    
37.     }
    
38. 
    
39. }

复制代码

Viewport小于 480px

　　下面得css是为了应对小于480px屏幕的情况，iphone横屏的时候就是这个宽度。

• html = 禁用文字大小调整。 默认情况，iphone增大了字体大小，这样更便于阅读。你可以使用 -webkit-text-size-adjust: none; 来取消这种设置。
• main-nav = 字体大小设置为 90%
  

1. @media screen and (max-width: 480px) {
   
2. 
   
3.     html {
   
4.         -webkit-text-size-adjust: none;
   
5.     }
   
6. 
   
7.     #main-nav a {
   
8.         font-size: 90%;
   
9.         padding: 10px 8px;
   
10.     }
    
11. 
    
12. }

复制代码

弹性的图片

　　为了让图片尺寸变得更为弹性，可以简单的添加 max-width:100% 和 height:auto。这种方式在IE7中正常工作，不能在IE8中工作，需要使用 width:auto\9 来解决这个问题。

1. img {
   
2.     max-width: 100%;
   
3.     height: auto;
   
4.     width: auto\9; /* ie8 */
   
5. }

复制代码

弹性的嵌入视频

　　为了使嵌入视频也变得更加弹性，也可以使用上面的方法。但是不知道什么原因，max-width:100% 在safari浏览器中不能正常的在嵌入资源中工作。我们需要使用width:100% 来代替他。

1. .video embed,
   
2. .video object,
   
3. .video iframe {
   
4.     width: 100%;
   
5.     height: auto;
   
6. }

复制代码

initial-scale Meta 标签 (iPhone)

　　默认情况下，iphone的safari浏览器会收缩页面，以适应他的屏幕。下面的语句告诉iphone的safari浏览器，使用设备宽度作为viewport的宽度，并且禁用initial-scale。

1. <meta name="viewport" content="width=device-width; initial-scale=1.0">

复制代码

最终效果

　　查看最终的demo，调整浏览器的大小，查看media query 的行为。你也可以使用iPhone, iPad, 新版Blackberry, 和 Android 来查看modile版的效果。

　　总结

可靠的Media Queries Javascript

　　可以使用css3-mediaqueries.js来解决浏览器不支持media queries的问题。

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

复制代码

CSS Media Queries

　　这一技巧可以创建自适应的设计，可以根据 viewport 的宽度重写布局的css。

1. @media screen and (max-width: 560px) {
   
2. 
   
3.     #content {
   
4.         width: auto;
   
5.         float: none;
   
6.     }
   
7. 
   
8.     #sidebar {
   
9.         width: 100%;
   
10.         float: none;
    
11.     }
    
12. 
    
13. }

复制代码

弹性的图片

　　使用max-width:100% 和 height:auto，可以让图片变得更加弹性。

1. img {
   
2.     max-width: 100%;
   
3.     height: auto;
   
4.     width: auto\9; /* ie8 */
   
5. }

复制代码

弹性的内嵌视频

　　使用width:100% 和 height:auto，可以让内嵌视频变得更加弹性。

1. .video embed,
   
2. .video object,
   
3. .video iframe {
   
4.     width: 100%;
   
5.     height: auto;
   
6. }

复制代码

Webkit字体大小调整

　　使用-webkit-text-size-adjust:none，在iphone上禁用字体大小调整。

1. html {
   
2.     -webkit-text-size-adjust: none;
   
3. }

复制代码

设置iPhone Viewport 和 Initial Scale

　　下面的语句实现了在iphone中，使用meta标签设置viewport 和 inital scale。

1. <meta name="viewport" content="width=device-width; initial-scale=1.0">

复制代码

好了，今天的教程到此为止。