使用jQuery Mobile和CSS3實現(xiàn)響應式設計
智能手機和平板設備的采用率不斷暴漲，jQuery Mobile 框架可以幫助開發(fā)人員滿足日益增長的移動 Web 體驗需求。提供移動 Web 體驗要求 Web 開發(fā)人員和設計人員掌握一套新的技能。 在 2010 年，Nielsen 預計每兩個美國人中就有一個會擁有智能手機，與 2008 年的結果(每 10 個人里只有一個擁有智能手機)相比，這是一個巨大的增長;并且，在 2011 年 6 月，AMI-Partners 預測 “平板在企業(yè)(員工人數(shù)介于 1 和 1000 之間)中的采用率到 2015 年將增長 1000%”。由于這些設備采用率的增加，對于能創(chuàng)建移動 Web 體驗的 Web 開發(fā)人員和設計人員的需求將會非常強勁。jQuery Mobile 框架對于創(chuàng)建移動 Web 體驗而言是一個優(yōu)秀的解決方案，因為它增加了移動網(wǎng)站的生成速度，并可支持多種移動平臺。
陷阱和解決方案
jQuery Mobile 框架對于創(chuàng)建手機或平板版本的 Web 頁面而言是一個優(yōu)秀的解決方案，但它完全依賴于對網(wǎng)站的內(nèi)容附加特定的數(shù)據(jù)角色屬性。在比較少見的情況下，有可能無法將這些屬性附加到 HTML 標記，并可能要求您創(chuàng)建一個單獨的移動網(wǎng)站。然而，本文將通過一些預見和規(guī)劃，向您展示如何結合使用 jQuery Mobile 框架和級聯(lián)樣式表版本 3 (CSS3) 的媒體查詢，來創(chuàng)建一個響應式設計，并確定布局如何對用戶的設備作出反應。目的是創(chuàng)建一個單一的網(wǎng)站，可以針對用戶設備的屏幕分辨率顯示適當?shù)牟季郑瑥亩?動態(tài)地響應用戶的設備。
響應式設計是根據(jù)用戶設備的屏幕分辨率來響應用戶設備的一種設計。這意味著，無論用戶是在移動、平板還是桌面設備上瀏覽 Web 頁面，設計都將根據(jù)該設備的屏幕分辨率顯示特定的布局，從而適當?shù)仨憫O備。雖然 jQuery Mobile 框架提供了一種方法，可快速、輕松地創(chuàng)建移動版本的網(wǎng)站，但它目前沒有(而且很有可能永遠也不會)提供一種固有的方法來根據(jù)設備的屏幕分辨率動態(tài)響應用戶 的設備。事實上，jQuery Mobile 網(wǎng)站作出聲明，原有的 Media Query Helper Classes 特性 在 beta 中已被棄用，并且已從***的版本中刪除。實際上，該框架的創(chuàng)建者反而推薦使用 CSS3 媒體查詢。CSS3 媒體查詢和 jQuery Mobile 框架的結合使用，可以實現(xiàn)一個能適應移動、平板和桌面環(huán)境的響應式設計。該框架的文檔實際上結合使用了 jQuery Mobile 框架和 CSS3 媒體查詢來實現(xiàn)自己的響應式設計。就對不同屏幕分辨率的反應方式而言，該文檔實際上與您在本文中將會創(chuàng)建的示例相當類似。
憑借對媒體類型的使用，CSS 自版本 2.1 起包括了與設備相關的編碼措施。使用媒體類型的一種常見方式是為桌面計算機屏幕和 Web 頁面的打印版本分別定義單獨的樣式表。CSS3 通過引進媒體查詢，將設備相關的編碼措施這個概念再推進了一步。媒體查詢可以用于確定與 Web 頁面交互的設備類型，并使開發(fā)人員能夠確定正在查看 Web 頁面的設備的物理屬性。無需多說，媒體查詢已經(jīng)成為交付特定于設備的樣式表的一種流行方式，正如您在 清單 1 中所看到的，這些代碼會根據(jù)屏幕分辨率交付特定于手機和平板設備的樣式表。
清單 1. 使用媒體查詢交付特定于設備的樣式表
- <link
- rel="stylesheet"
- type="text/css"
- media="screen and (max-device-width: 799px)"
- href="mobile-tablet.css" />
本示例中的 media 屬性包含一個被設置為 screen 的媒體類型值，以及一個媒體查詢(在括號中)。這個特定的媒體查詢，檢查用戶當前設備的屏幕分辨率是否小于或等于 799px。如果是，則交付這個手機/平板樣式表;否則，不交付這個樣式表。您可以在單個 Web 頁面中包括多個樣式表鏈接，每一個樣式表鏈接都有自己的媒體查詢，根據(jù)您所需要的多種不同的分辨率，有所不同地呈現(xiàn)您的頁面。我注意到，最常見的基于分辨 率的樣式表似乎有三種，一種用于手機和平板設備、一種用于較低分辨率的桌面顯示器，還有一種用于較高分辨率的桌面顯示器。如果您準備使用清單 1 中的代碼，分辨率小于 799px 的所有設備將使用這個樣式表，所以這是一個***的示例，說明如何可以針對手機和平板設備使用一種樣式表，而臺式計算機則使用不同的樣式表。
也可以在單個樣式表的 CSS 內(nèi)直接使用多個媒體查詢。清單 2 顯示了用于一組導航項的 CSS 類示例，稍后您將在本文中創(chuàng)建它。當設備的屏幕分辨率是 800px 寬或以上時，導航的寬度設置為 300px;當屏幕分辨率為 799px 或以下時，導航的寬度設置為 100%。
清單 2. 使用媒體查詢來交付特定于設備的 CSS
- @media all and (min-width: 800px) {
- #nav {
- width: 300px;
- }
- }
- @media all and (max-width: 799px) {
- #nav {
- width: 100%;
- }
- }
關于媒體查詢還有另一件很酷的事情，那就是如果您在一個現(xiàn)代 Web 瀏覽器(包括清單 2 中的 CSS 以及相關的 HTML 元素)中查看一個 Web 頁面，該 Web 頁面實際上也將響應瀏覽器的大小。因此，如果瀏覽器寬度被設置為 799px 或以下，導航的寬度將是 100%;如果瀏覽器的寬度被設置為 800px 或更大，導航的寬度將被設置為 300px。
成為響應式
媒體查詢是一種條件語句，用來確定將什么 CSS 應用到 Web 頁面。與 jQuery Mobile 框架一起使用，您可以創(chuàng)建一些強大的移動網(wǎng)站，同時保持獨立的桌面布局。jQuery Mobile 框架本身可以用于快速、輕松地創(chuàng)建觸摸友好的網(wǎng)站。該框架有大量組件，可以很容易地添加按鈕、工具欄、對話框、列表視圖等等。然而，當涉及到處理 Web 頁面布局時，CSS 仍然是***的語言。幸運的是，如本文前面所介紹的，CSS3 已引入媒體查詢，它為開發(fā)人員提供根據(jù)設備分辨率改變 Web 頁面布局的功能。
結合使用 jQuery Mobile 框架，您可以創(chuàng)建一些響應式布局。出于本文的目的，我用一個簡單的示例，其中包括一組導航項和一個網(wǎng)格。導航項和網(wǎng)格將被根據(jù)不同屏幕分辨率安排不同的布 局。在 jQuery Mobile 框架在 Web 頁面中運行之前，您需要做的***件事是嵌入與 jQuery Mobile 框架關聯(lián)的 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 組件，您將使用它顯示您的導航項。要創(chuàng)建一個列表視圖，只需將一個 data-role 屬性添加到其值為 listview 的導航列表 ul 元素中。jQuery Mobile 框架還包括一些有用的工具，允許您創(chuàng)建多列的網(wǎng)格布局。在 清單 4 中，我已經(jīng)包含了一個兩行三列的網(wǎng)格，這是使用 ui-grid-b、ui-block-a 和 ui-bar 類組合構造的。
清單 4. 將一個 listview 和網(wǎng)格添加到內(nèi)容區(qū)域字母被附加到某些類名稱的末尾：這些是主題相關的字母，是 jQuery Mobile 框架用來確定使用哪個主題呈現(xiàn)組件。
現(xiàn)在您已經(jīng)創(chuàng)建了您的 Web 頁面，您可以使用 CSS3 創(chuàng)建一個可以根據(jù)用戶的屏幕分辨率進行動態(tài)調(diào)整的響應式布局。要實現(xiàn)這一點很簡單：只需使用您之前在本文中了解到的媒體查詢來確定屏幕分辨率，然后編寫專門處理不同場景的 CSS。清單 5 使用一個媒體查詢檢查 800px 或以上的屏幕分辨率，使用另一個媒體查詢檢查 799px 或以下的屏幕分辨率。***個媒體查詢將導航和網(wǎng)格浮動到左側，它們可以自己定位為彼此相鄰，以填滿在更高分辨率的屏幕上的更寬的空間。第二個媒體查詢沒有 使用浮動，并將導航和網(wǎng)格的寬度設置為 100%，并最終將導航定位在網(wǎng)格的上方，以適應屏幕分辨率較小的設備，如智能手機和平板電腦。
清單 5. 使用媒體查詢創(chuàng)建響應式布局
- @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. 分辨率較大的設備如何呈現(xiàn) Web 頁面
具有較小屏幕分辨率的設備將顯示一個類似于 圖 2 的并排布局。
圖 2. 分辨率較小的設備如何渲染 Web 頁面
當然，這是一個極其簡單的示例，但它顯示了使用 jQuery Mobile 框架和 CSS3 創(chuàng)建一個響應式布局是多么容易。這種可能性令人興奮，而這僅僅是一個幫助您入門的墊腳石。將幾個簡單的數(shù)據(jù)角色屬性添加到您的 HTML，您就可以創(chuàng)建 Web 頁面的移動版本;通過包括 CSS3 媒體查詢，您就可以讓您的設計根據(jù)屏幕分辨率響應用戶的設備。當有人使用桌面計算機查看您的 Web 頁面時，您甚至可以修改 jQuery Mobile 的主題，使 Web 頁面在更高的分辨率中看起來并不像一個移動的 Web 頁面。您需要做的只是使用媒體查詢來檢查更高的分辨率，然后更改那些 jQuery Mobile 組件的 CSS，基本上覆蓋用于創(chuàng)建主題的默認樣式。
結束語
響應式設計的目的是盡可能以***的布局顯示您的數(shù)據(jù)，以實現(xiàn)用戶友好的 Web 頁面。jQuery Mobile 框架和 CSS3 的結合，可以創(chuàng)建一套功能強大的布局，您可以用它們來響應每個用戶的設備。
下載源碼：jquery-mobile-responsive-design.zip
【編輯推薦】
