使用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">
3.     <header id="header">
5.         <hgroup>
6.             <h1 id="site-logo">Demo</h1>
7.             <h2 id="site-description">Site Description</h2>
8.         </hgroup>
10.         <nav>
11.             <ul id="main-nav">
12.                 <li><a href="#">Home</a></li>
13.             </ul>
14.         </nav>
16.         <form id="searchform">
17.             <input type="search">
18.         </form>
20.     </header>
21.    
22.     <div id="content">
24.         <article class="post">
25.             blog post
26.         </article>
28.     </div>
29.    
30.     <aside id="sidebar">
32.         <section class="widget">
33.              widget
34.         </section>
35.                         
36.     </aside>
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. }
6. #header {
7.     height: 160px;
8. }
10. #content {
11.     width: 600px;
12.     float: left;
13. }
15. #sidebar {
16.     width: 280px;
17.     float: right;
18. }
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) {
3.     #pagewrap {
4.         width: 95%;
5.     }
7.     #content {
8.         width: 60%;
9.         padding: 3% 4%;
10.     }
12.     #sidebar {
13.         width: 30%;
14.     }
15.     #sidebar .widget {
16.         padding: 8% 7%;
17.         margin-bottom: 10px;
18.     }
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) {
3.     #header {
4.         height: auto;
5.     }
7.     #searchform {
8.         position: absolute;
9.         top: 5px;
10.         right: 0;
11.     }
13.     #main-nav {
14.         position: static;
15.     }
17.     #site-logo {
18.         margin: 15px 100px 5px 0;
19.         position: static;
20.     }
22.     #site-description {
23.         margin: 0 0 15px;
24.         position: static;
25.     }
27.     #content {
28.         width: auto;
29.         float: none;
30.         margin: 20px 0;
31.     }
33.     #sidebar {
34.         width: 100%;
35.         float: none;
36.         margin: 0;
37.     }
39. }

複製代碼

Viewport小於 480px

　　下面得css是為了應對小於480px螢幕的情況，iphone橫屏的時候就是這個寬度。

• html = 禁用文字大小調整。 預設情況，iphone增大了字型大小，這樣更便於閱讀。你可以使用 -webkit-text-size-adjust: none; 來取消這種設定。
• main-nav = 字型大小設定為 90%

1. @media screen and (max-width: 480px) {
3.     html {
4.         -webkit-text-size-adjust: none;
5.     }
7.     #main-nav a {
8.         font-size: 90%;
9.         padding: 10px 8px;
10.     }
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) {
3.     #content {
4.         width: auto;
5.         float: none;
6.     }
8.     #sidebar {
9.         width: 100%;
10.         float: none;
11.     }
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">

複製代碼

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