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

　　轉載請注明原創地址：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實踐系列