使用 jQuery Mobile 和 CSS3 實現響應式設計

使用 jQuery Mobile 和 CSS3 實現響應式設計

建立能夠適應每一個用戶的屏幕分辨率的 Web 頁面佈局

jQuery Mobile 框架就其自己而言就是一個優秀的解決方案，能夠快速建立一個可訪問的由 HTML5 標記驅動的移動網站。當與 CSS3 配合使用時，工做真的會變得頗有趣，由於它使建立一個根據屏幕分辨率來響應用戶設備的 Web 頁面佈局成爲可能。本文展現瞭如何使用 jQuery Mobile 框架和 CSS3 媒體查詢在您的 Web 頁面中實現響應式設計。

jQuery Mobile 框架是一個  JavaScript 庫，您能夠用它來輕鬆地建立了一個移動版本的網站，將現有的 Web 頁面轉換成觸摸友好的網站和應用程序。jQuery  Mobile 框架容許用戶經過 Web  瀏覽器直接鏈接到觸摸友好的應用程序，這無疑將改變移動應用程序在手機及平板設備上的訪問和分佈方式。還有許多其它的移動開發選項，但它們與  jQuery Mobile 正採用的方法的不一樣之處是，它們的目標是針對各類移動平臺。

智能手機和平板設備的採用率不斷暴漲，jQuery Mobile 框架能夠幫助開發人員知足日益增加的移動 Web 體驗需求。提供移動 Web 體驗要求 Web 開發人員和設計人員掌握一套新的技能。                  在 2010 年，Nielsen 預計每兩個美國人中就有一個會擁有智能手機（參見 參考資料  獲取該博客的連接），與 2008 年的結果（每 10 我的裏只有一個擁有智能手機）相比，這是一個巨大的增加；而且，在 2011 年 6  月，AMI-Partners 預測 「平板在企業（員工人數介於 1 和 1000 之間）中的採用率到 2015 年將增加 1000%」（參見  參考資料  獲取該完整預測信息的連接）。因爲這些設備採用率的增長，對於能建立移動 Web 體驗的 Web  開發人員和設計人員的需求將會很是強勁。jQuery Mobile 框架對於建立移動 Web  體驗而言是一個優秀的解決方案，由於它增長了移動網站的生成速度，並可支持多種移動平臺。

陷阱和解決方案

jQuery  Mobile 框架對於建立手機或平板版本的 Web  頁面而言是一個優秀的解決方案，但它徹底依賴於對網站的內容附加特定的數據角色屬性。在比較少見的狀況下，有可能沒法將這些屬性附加到 HTML  標記，並可能要求您建立一個單獨的移動網站。然而，本文將經過一些預見和規劃，向您展現如何結合使用 jQuery Mobile 框架和級聯樣式表版本  3 (CSS3)  的媒體查詢，來建立一個響應式設計，並肯定佈局如何對用戶的設備做出反應。目的是建立一個單一的網站，能夠針對用戶設備的屏幕分辨率顯示適當的佈局，從而 動態地響應用戶的設備。

響應式設計是根據用戶設備的屏幕分辨率來響應用戶設備的一種設計。這意味着，不管用戶是在移動、平板仍是 桌面設備上瀏覽 Web 頁面，設計都將根據該設備的屏幕分辨率顯示特定的佈局，從而適當地響應設備。雖然 jQuery Mobile  框架提供了一種方法，可快速、輕鬆地建立移動版本的網站，但它目前沒有（並且頗有可能永遠也不會）提供一種固有的方法來根據設備的屏幕分辨率動態響應用戶 的設備。事實上，jQuery Mobile 網站做出聲明，原有的 Media Query Helper Classes 特性 在 beta  中已被棄用，而且已從最新的版本中刪除。實際上，該框架的建立者反而推薦使用 CSS3 媒體查詢。CSS3 媒體查詢和 jQuery Mobile  框架的結合使用，能夠實現一個能適應移動、平板和桌面環境的響應式設計。該框架的文檔實際上結合使用了 jQuery Mobile 框架和 CSS3  媒體查詢來實現本身的響應式設計。就對不一樣屏幕分辨率的反應方式而言，該文檔實際上與您在本文中將會建立的示例至關相似。

憑藉對媒體類型的 使用，CSS 自版本 2.1 起包括了與設備相關的編碼措施。使用媒體類型的一種常見方式是爲桌面計算機屏幕和 Web  頁面的打印版本分別定義單獨的樣式表。CSS3 經過引進媒體查詢，將設備相關的編碼措施這個概念再推動了一步。媒體查詢能夠用於肯定與 Web  頁面交互的設備類型，並使開發人員可以肯定正在查看 Web  頁面的設備的物理屬性。無需多說，媒體查詢已經成爲交付特定於設備的樣式表的一種流行方式，正如您在 清單 1 中所看到的，這些代碼會根據屏幕分辨率交付特定於手機和平板設備的樣式表。

清單 1. 使用媒體查詢交付特定於設備的樣式表

<link    rel="stylesheet"    type="text/css"    media="screen and (max-device-width: 799px)"    href="mobile-tablet.css" />

本示例中的 media 屬性包含一個被設置爲 screen  的媒體類型值，以及一個媒體查詢（在括號中）。這個特定的媒體查詢，檢查用戶當前設備的屏幕分辨率是否小於或等於  799px。若是是，則交付這個手機/平板樣式表；不然，不交付這個樣式表。您能夠在單個 Web  頁面中包括多個樣式表連接，每個樣式表連接都有本身的媒體查詢，根據您所須要的多種不一樣的分辨率，有所不一樣地呈現您的頁面。我注意到，最多見的基於分辨 率的樣式表彷佛有三種，一種用於手機和平板設備、一種用於較低分辨率的桌面顯示器，還有一種用於較高分辨率的桌面顯示器。若是您準備使用清單 1  中的代碼，分辨率小於 799px  的全部設備將使用這個樣式表，因此這是一個完美的示例，說明如何能夠針對手機和平板設備使用一種樣式表，而臺式計算機則使用不一樣的樣式表。

也能夠在單個樣式表的 CSS 內直接使用多個媒體查詢。清單 2 顯示了用於一組導航項的 CSS 類示例，稍後您將在本文中建立它。當設備的屏幕分辨率是 800px 寬或以上時，導航的寬度設置爲 300px；當屏幕分辨率爲 799px 或如下時，導航的寬度設置爲 100%。

清單 2. 使用媒體查詢來交付特定於設備的 CSS

@media all and (min-width: 800px) {   #nav {     width: 300px;   } } @media all and (max-width: 799px) {   #nav {     width: 100%;   } }

關於媒體查詢還有另外一件很酷的事情，那就是若是您在一個現代 Web 瀏覽器（包括清單 2 中的 CSS 以及相關的  HTML 元素）中查看一個 Web 頁面，該 Web 頁面實際上也將響應瀏覽器的大小。所以，若是瀏覽器寬度被設置爲 799px  或如下，導航的寬度將是 100%；若是瀏覽器的寬度被設置爲 800px 或更大，導航的寬度將被設置爲 300px。

回頁首

成爲響應式

媒 體查詢是一種條件語句，用來肯定將什麼 CSS 應用到 Web 頁面。與 jQuery Mobile  框架一塊兒使用，您能夠建立一些強大的移動網站，同時保持獨立的桌面佈局。jQuery Mobile  框架自己能夠用於快速、輕鬆地建立觸摸友好的網站。該框架有大量組件，能夠很容易地添加按鈕、工具欄、對話框、列表視圖等等。然而，當涉及處處理 Web  頁面佈局時，CSS 仍然是首選的語言。幸運的是，如本文前面所介紹的，CSS3 已引入媒體查詢，它爲開發人員提供根據設備分辨率改變 Web  頁面佈局的功能。

結合使用 jQuery Mobile  框架，您能夠建立一些響應式佈局。出於本文的目的，我用一個簡單的示例，其中包括一組導航項和一個網格。導航項和網格將被根據不一樣屏幕分辨率安排不一樣的布 局。在 jQuery Mobile 框架在 Web 頁面中運行以前，您須要作的第一件事是嵌入與 jQuery Mobile 框架關聯的  JavaScript 文件和 CSS（參見 清單 3）。

清單 3. 嵌入 jQuery Mobile 框架

<link rel="stylesheet"    href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" /> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

jQuery Mobile 框架包括一個 listview 組件，您將使用它顯示您的導航項。要建立一個列表視圖，只需將一個 data-role 屬性添加到其值爲 listview 的導航列表 ul 元素中。jQuery Mobile 框架還包括一些有用的工具，容許您建立多列的網格佈局。在 清單 4 中，我已經包含了一個兩行三列的網格，這是使用 ui-grid-b、ui-block-a 和 ui-bar 類組合構造的。要了解更多有關 jQuery Mobile 框架的可用組件，請參閱 參考資料。

清單 4. 將一個 listview 和網格添加到內容區域

<div data-role="content">     <ul id="nav" data-role="listview" data-inset="true">         <li><a href="#">Nav item</a></li>         <li><a href="#">Nav item</a></li>         <li><a href="#">Nav item</a></li>     </ul>          <div id="grid">         <div><div class="ui-bar ui-bar-e">A</div></div>         <div><div class="ui-bar ui-bar-e">B</div></div>         <div><div class="ui-bar ui-bar-e">C</div></div>         <div><div class="ui-bar ui-bar-e">A</div></div>         <div><div class="ui-bar ui-bar-e">B</div></div>         <div><div class="ui-bar ui-bar-e">C</div></div>     </div> </div>

字母被附加到某些類名稱的末尾：這些是主題相關的字母，是 jQuery Mobile 框架用來肯定使用哪一個主題呈現組件。要了解有關使用 jQuery Mobile 框架進行主題設計的更多信息，請閱讀 參考資料 中的相關文章。

如今您已經建立了您的 Web 頁面，您可使用 CSS3 建立一個能夠根據用戶的屏幕分辨率進行動態調整的響應式佈局。要實現這一點很簡單：只需使用您以前在本文中瞭解到的媒體查詢來肯定屏幕分辨率，而後編寫專門處理不一樣場景的 CSS。清單 5  使用一個媒體查詢檢查 800px 或以上的屏幕分辨率，使用另外一個媒體查詢檢查 799px  或如下的屏幕分辨率。第一個媒體查詢將導航和網格浮動到左側，它們能夠本身定位爲彼此相鄰，以填滿在更高分辨率的屏幕上的更寬的空間。第二個媒體查詢沒有 使用浮動，並將導航和網格的寬度設置爲 100%，並最終將導航定位在網格的上方，以適應屏幕分辨率較小的設備，如智能手機和平板電腦。

清單 5. 使用媒體查詢建立響應式佈局

@media all and (min-width: 800px) {   #nav {     width: 300px;     float: left;     margin-right: 20px;   }   #grid {     width: 450px;     float: left;   } } @media all and (max-width: 799px) {   #nav {     width: 100%;   }   #grid {     width: 100%;   } }

具備較高屏幕分辨率的設備將顯示一個相似於 圖 1 的並排佈局。

圖 1. 分辨率較大的設備如何呈現 Web 頁面

具備較小屏幕分辨率的設備將顯示一個相似於 圖 2 的並排佈局。

圖 2. 分辨率較小的設備如何渲染 Web 頁面

當 然，這是一個極其簡單的示例，但它顯示了使用 jQuery Mobile 框架和 CSS3  建立一個響應式佈局是多麼容易。這種可能性使人興奮，而這僅僅是一個幫助您入門的墊腳石。將幾個簡單的數據角色屬性添加到您的 HTML，您就能夠建立  Web 頁面的移動版本；經過包括 CSS3 媒體查詢，您就可讓您的設計根據屏幕分辨率響應用戶的設備。當有人使用桌面計算機查看您的 Web  頁面時，您甚至能夠修改 jQuery Mobile 的主題，使 Web 頁面在更高的分辨率中看起來並不像一個移動的 Web  頁面。您須要作的只是使用媒體查詢來檢查更高的分辨率，而後更改那些 jQuery Mobile 組件的 CSS，基本上覆蓋用於建立主題的默認樣式。

回頁首

結束語

響應式設計的目的是儘量以最好的佈局顯示您的數據，以實現用戶友好的 Web 頁面。jQuery Mobile 框架和 CSS3 的結合，能夠建立一套功能強大的佈局，您能夠用它們來響應每一個用戶的設備。

回頁首

下載

描述	名字	大小
jQuery Mobile 和 CSS3 Web 頁面樣例	jquery-mobile-responsive-design.zip	3KB

參考資料

學習

• 閱讀完整的 Nielsen 預測，Smartphones to Overtake Feature Phones in U.S. by 2011。

• 閱讀完整的 AMI-Partners 預測，REPORT: SMB Adoption of Tablet Computers to Increase by 1,000 Percent                     by 2015。

• 查看 jQuery Mobile 框架的當前文檔。

• 查看 jQuery Mobile 框架提供的 當前按鈕圖標的完整列表。

• 在 Kris 的文章 「建立自定義 jQuery 移動主題」（developerWorks，2011 年 11 月）中瞭解有關 jQuery Mobile 主題的更多信息。

• 另外，請閱讀 Kris 的文章 「使用 jQuery Mobile API 實現細粒度的自定義控制」（developerWorks，2012 年 1 月），瞭解如何經過設置全局選項，鉤住交互事件並使用曝光的方法，從而擴展 jQuery Mobile。

• 在 developerWorks 移動開發專區，查找面向移動開發人員的有關各類主題的指南文章、評估代碼和技術觀點。

• 參加 developerWorks Live! 技術加油站，快速瞭解 IBM 產品和工具，以及 IT 行業趨勢。

得到產品和技術

• 下載並引用 jQuery Mobile JavaScript 和 CSS 文件。

• 以最適合您的方式 評估 IBM 產品：下載產品試用版，在線試用產品，在雲環境中使用產品，或者在 SOA 沙箱 中花幾小時學習如何高效實現面向服務的架構。

討論

• 加入 developerWorks 中文社區，developerWorks 社區是一個面向全球 IT 專業人員，能夠提供博客、書籤、wiki、羣組、聯繫、共享和協做等社區功能的專業社交網絡社區。

• 加入 IBM 軟件下載與技術交流羣組，參與在線交流。