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 類組合構造的。 清單 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>A</div></div> <div><div>B</div></div> <div><div>C</div></div> <div><div>A</div></div> <div><div>B</div></div> <div><div>C</div></div> </div></div>
字母被附加到某些類名稱的末尾：這些是主題相關的字母，是 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-responsive-design.zip
文章出處：IBM developerWorks