HTML5實踐 — 使用CSS3 Media Queries實現響應式設計

文章目錄

• 　　第一次運行
• 　　概述
• 　　HTML代碼
• 　　CSS
• 　　CSS3 Media Query
• 　　彈性的圖片
• 　　彈性的嵌入視頻
• 　　最終效果
• 　　總結

　　轉載請註明原創地址：http://www.cnblogs.com/softlover/archive/2012/11/21/2781388.html

 

　　現在螢幕解析度的範圍很大，從 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"。

<div id="pagewrap">    <header id="header">        <hgroup>            <h1 id="site-logo">Demo</h1>            <h2 id="site-description">Site Description</h2>        </hgroup>        <nav>            <ul id="main-nav">                <li><a href="#">Home</a></li>            </ul>        </nav>        <form id="searchform">            <input type="search">        </form>    </header>        <div id="content">        <article class="post">            blog post        </article>    </div>        <aside id="sidebar">        <section class="widget">             widget        </section>                            </aside>    <footer id="footer">        footer    </footer>    </div>

 

　　 HTML5.js

　　請注意，我在demo中使用了html5標籤，不過IE9之前IE瀏覽器不支援<header>, <article>, <footer>, <figure>等html5新標籤。可以在html文檔中添加 html5.js 檔案將解決這一問題。

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

 

　　CSS　　 設定html5元素為塊狀元素

　　下面的css將會把html5的元素（article, aside, figure, header, footer 等）設定為塊元素。

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

　　 css主體結構

　　在這裡我也不會解釋css檔案的細節。頁面主容器“pagewrap”的寬度被設定為980px。header被設定為固定高度160px。“content”的寬度為600px，靠左浮動。“sidebar”寬度設定為280px，靠右浮動。

#pagewrap {    width: 980px;    margin: 0 auto;}#header {    height: 160px;}#content {    width: 600px;    float: left;}#sidebar {    width: 280px;    float: right;}#footer {    clear: both;}

　　 Step 1 Demo

　　我們可以通過demo查看當前效果。這時我們還沒有使用 media queries，調整瀏覽器寬度，頁面配置也不會發生變化。

 

　　CSS3 Media Query

　　你可以通過《HTML5實踐 -- CSS3 Media Queries》瞭解更多資訊。

　　 包含 Media Queries Javascript檔案

　　IE8和之前的瀏覽器不支援CSS3 media queries，你可以在頁面中添加css3-mediaqueries.js來解決這個問題。

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

　 　包含 Media Queries CSS

　　建立media query所需的css，然後在頁面中添加引用。

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

　　 Viewport小於 980px(流動布局)

　　當viewport小於980px的時候，將會採用下面的規則：

• pagewrap = 寬度設定為 95%
• content = 寬度設定為 60%
• sidebar = 寬度設定為 30%

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

@media screen and (max-width: 980px) {    #pagewrap {        width: 95%;    }    #content {        width: 60%;        padding: 3% 4%;    }    #sidebar {        width: 30%;    }    #sidebar .widget {        padding: 8% 7%;        margin-bottom: 10px;    }}

　　 Viewport小於 650px(單列布局)

　　當viewport小於650px的時候，將會採用下面的規則：

• header = 設定高度為 auto
• searchform = 重新設定 searchform 的位置 5px top
• main-nav = 設定位置為 static
• site-logo = 設定位置為 static
• site-description = 設定位置為 static
• content = 設定寬度為 auto (這會使容器寬度變為fullwidth) ，並且擺脫浮動
• sidebar = 設定寬度為 100%，並且擺脫浮動

@media screen and (max-width: 650px) {    #header {        height: auto;    }    #searchform {        position: absolute;        top: 5px;        right: 0;    }    #main-nav {        position: static;    }    #site-logo {        margin: 15px 100px 5px 0;        position: static;    }    #site-description {        margin: 0 0 15px;        position: static;    }    #content {        width: auto;        float: none;        margin: 20px 0;    }    #sidebar {        width: 100%;        float: none;        margin: 0;    }}

　　Viewport小於 480px

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

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

@media screen and (max-width: 480px) {    html {        -webkit-text-size-adjust: none;    }    #main-nav a {        font-size: 90%;        padding: 10px 8px;    }}

 

　　彈性的圖片

　　為了讓圖片尺寸變得更為彈性，可以簡單的添加 max-width:100% 和 height:auto。這種方式在IE7中正常工作，不能在IE8中工作，需要使用 width:auto\9 來解決這個問題。

img {    max-width: 100%;    height: auto;    width: auto\9; /* ie8 */}

 

　　彈性的嵌入視頻

　　為了使嵌入視頻也變得更加彈性，也可以使用上面的方法。但是不知道什麼原因，max-width:100% 在safari瀏覽器中不能正常的在嵌入資源中工作。我們需要使用width:100% 來代替他。

.video embed,.video object,.video iframe {    width: 100%;    height: auto;}

 

　　initial-scale Meta 標籤 (iPhone)

　　預設情況下，iphone的safari瀏覽器會收縮頁面，以適應他的螢幕。下面的語句告訴iphone的safari瀏覽器，使用裝置寬度作為viewport的寬度，並且禁用initial-scale。

<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的問題。

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

 

　　 CSS Media Queries

　　這一技巧可以建立自適應的設計，可以根據 viewport 的寬度重寫布局的css。

@media screen and (max-width: 560px) {    #content {        width: auto;        float: none;    }    #sidebar {        width: 100%;        float: none;    }}

 

　　 彈性的圖片

　　使用max-width:100% 和 height:auto，可以讓圖片變得更加彈性。

img {    max-width: 100%;    height: auto;    width: auto\9; /* ie8 */}

 

　　 彈性的內嵌視頻

　　使用width:100% 和 height:auto，可以讓內嵌視頻變得更加彈性。

.video embed,.video object,.video iframe {    width: 100%;    height: auto;}

 

　　 Webkit字型大小調整

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

html {    -webkit-text-size-adjust: none;}

 

　　 設定iPhone Viewport 和 Initial Scale

　　下面的語句實現了在iphone中，使用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

 

HTML5實踐系列