<!doctype html> <html> <head> <meta charset="gb2312"> <title>響應式Web設計</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[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> </head> <body> <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>·《全民編程》我在微軟生活中所接觸的 </li> <li>·Eclipse安裝SVN插件方式簡明介紹</li> <li>·使用Eclipse調試Java程序的10個技巧 </li> <li>·三步學會Java Socket編程 </li> <li>·程序員妻子自述: 那些程序員教給我的</li> <li>·我希望在20歲時就知道的26條時間管理 </li> <li>·詳解Java解析XML的四種方法 </li> <li>·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> </body> </html>
響應式布局的一個例子mark
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。