學習之響應式Web設計---一個例項

穆乙發表於2013-06-17
Web

週末閒來無事,做了一個響應式設計的例子。當然，由此並不能窺見響應式設計真諦之一斑。但，對於初次接觸響應設計，對於響應式設計的概念依舊模糊不清的同學來說，或許是個啟蒙！

閒語暫且不表，進入正題，這裡沒有太多的表述，直接上程式碼：

本例基於html5標籤，所以為了相容不支援html5標籤的瀏覽器和不支援Media Query的瀏覽器引入以下檔案：

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

下面是樣式，也是本例的核心部分：

<style>
body { background: #000; font: normal 14px/2 '微軟雅黑'; color: #464646; padding-top: 28px; }
* { padding: 0; margin: 0; list-style: none; font-style:normal }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
header { width: 980px; margin: 0 auto; }
header .name { font: bold 36px/48px Arial, Helvetica, sans-serif; color: #F90 }
header nav { height: 50px; background: #663; border-radius: 5px; text-align: center; }
header nav, header nav a { color: #fff }
header nav ul li { display: inline-block;*display:inline;*zoom:1; width: 200px; line-height: 50px; }
#container { margin: 12px auto; width: 980px; overflow: hidden; zoom: 1; }
#container article { width: 700px; background: #fff; border-radius: 5px;  float: left;margin-bottom:10px;padding:0 12px;}
#container article h1 { height: 48px; }
#container article figure {text-align:center;}
#container article figure img { max-width: 100%; height: auto;margin:0 auto}
#container article section { margin: 20px; font-size: 12px; }
#container article section p { margin-top: 1em; text-indent: 2em }
#container aside { width: 240px; float: right; }
#container aside article { background: #fff; border-radius: 5px; font-size: 12px; padding: 10px; width:220px;margin-bottom:12px}
#container aside article h1{font:bold 14px/28px '微軟雅黑';border-bottom:1px solid #eee;height:28px;}
#container aside article .imglist{font-size:0}
#container aside article .imglist li{display:inline-block;*display:inline;*zoom:1;width:66px;height:50px;border:1px solid #eee;overflow:hidden;margin-right:5px;margin-top:5px;}
#container aside article .imglist li img{width:62px;height:auto;margin:2px;}
footer { background: #669; width: 980px; margin: 12px auto; color: #fff; height: 36px; text-align: center; font: normal 12px/36px '微軟雅黑'; border-radius: 5px; }
@media screen and (max-width:980px) {
    header {width:100%;overflow:hidden;*zoom:1; }
    header .name { font: bold 36px/48px Arial, Helvetica, sans-serif; color: #F90;text-align:center}
    header nav {  background: none;  text-align: center; height:auto;width:100%;}
    header nav ul li{display:block; background: #663; border-radius: 5px;margin:3px 0;height:30px;line-height:30px;width:100%;}
    #container { margin: 12px auto; width: 100%; overflow: hidden; zoom: 1; }
    #container article { width: 100%; background: #fff; border-radius: 5px; float: none ;padding:0;}
    #container article h1 { width:95%;margin:0 auto }
    #container article figure{ width:95%;margin:0 auto}
    #container aside { width: 100%;; float: none; }
    #container aside article { background: #fff; border-radius: 5px; font-size: 12px; padding: 10px; width:auto;margin-bottom:6px}
    footer { background: #669; width: 100%; margin: 12px auto; height:auto;color: #fff;  text-align: center; font: normal 12px/24px '微軟雅黑'; border-radius: 5px; padding:12px 0}
    footer em{width:95%;margin:0 auto;display:block;border-bottom:1px dotted #789}
}
</style>

下面就是html程式碼了：

<header>
    <div class="name">Media Query Demo</div>
    <nav>
        <ul>
            <li>產品product</li>
            <li>設計design</li>
            <li>前端front end</li>
        </ul>
    </nav>
</header>
<div id="container">
    <article>
        <h1>響應式Web設計</h1>
        <figure>
            <figcaption></figcaption>
            <img src="images/img01.jpg"/> </figure>
        <section>
            <p>十一長假已然過去了一大半。今天倒真是晴朗的不行，向窗外望去幾乎可以看到陽光穿過涼爽的空氣一縷縷灑落下來的樣子。自從不再是學生，對每年的幾次長假就無比珍惜，想方設法讓每一天都儘量過的飽滿一些；夜裡閉上眼，滿腦子就都是Drupal、部落格、咖啡、使命召喚、南方公園。..也許需要出門走一走了。</p>
            <p>OK開始說正經的了。在之前一篇譯文中，我們瞭解了<a href="http://www.chinaz.com/manage/2011/1121/221607.shtml" target="_blank">響應式Web設計的概念、組成要素以及基本的實現思路</a>。今天繼續相關話題，我們將從前文介紹過的"彈性佈局結構"這方面出發，通過一個具體的例項來深入學習。</p>
            <p>如今的螢幕解析度，小至320px（iPhone），大到2560px甚至更高（大顯示器），變化範圍極大。除了使用傳統的桌上型電腦，使用者會越來越多的通過手機、上網本、iPad一類的平板裝置來瀏覽頁面。這種情況下，固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性，其佈局結構要做到根據不同的裝置及螢幕解析度進行響應調整。接下來，我們將瞭解一下怎樣通過HTML5和CSS3   Media Queries（媒介查詢）相關技術來實現跨裝置跨瀏覽器的響應式Web設計方案。</p>
            <p>我們將範例頁面的父級容器寬度設定為固定的980px，對於桌面瀏覽環境，該寬度適用於任何寬於1024畫素的解析度。我們通過media   query來監測那些寬度小於980px的裝置解析度，並將頁面的寬度設定由"固定"方式改為"液態"，佈局元素的寬度隨著瀏覽器視窗的尺寸變化進行調整。當可視部分的寬度進一步減小到650px以下時，主要內容部分的容器寬度會增大至全屏，而側邊欄將被置於主內容部分的下方，整個頁面變為單欄佈局。</p>
        </section>
    </article>
    <aside>
        <article>
            <h1>最多訪問文章</h1>
            <ul>
                <li>&middot;《全民程式設計》我在微軟生活中所接觸的 </li>
                <li>&middot;Eclipse安裝SVN外掛方式簡明介紹</li>
                <li>&middot;使用Eclipse除錯Java程式的10個技巧 </li>
                <li>&middot;三步學會Java Socket程式設計 </li>
                <li>&middot;程式設計師妻子自述: 那些程式設計師教給我的</li>
                <li>&middot;我希望在20歲時就知道的26條時間管理 </li>
                <li>&middot;詳解Java解析XML的四種方法 </li>
                <li>&middot;Java陣列宣告、建立、初始化 </li>
            </ul>
        </article>
        <article>
            <h1>最新發布照片</h1>
            <ul class="imglist">
                <li><img src="images/2.jpg"></li>
                <li><img src="images/3.jpg"></li>
                <li><img src="images/4.jpg"></li>
                <li><img src="images/5.jpg"></li>
                <li><img src="images/6.jpg"></li>
                <li><img src="images/2.jpg"></li>
                <li><img src="images/3.jpg"></li>
                <li><img src="images/4.jpg"></li>
            </ul>
        </article>
    </aside>
</div>
<footer><em>關於站長之家</em> <em>聯絡我們(電話)</em> <em>廣告服務</em> <em>友情連結</em> <em>網站地圖</em> <em>版權宣告</em> <em>人才招聘</em></footer>

 

想看demo點選！

相關文章