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