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

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 中所看到的，這些代碼會根據屏幕分辨率交付特定于手機和平板設備的樣式表。

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

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

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

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

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

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

<link rel="stylesheet" 
   />
<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>

<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" class="ui-grid-b">
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
    </div>
</div>

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

@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%;
  }
}

具有較小屏幕分辨率的設備將顯示一個類似于 圖 2 的并排布局。

當然，這是一個極其簡單的示例，但它顯示了使用 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