文|曾瑤

讓您的頁(yè)面隨“機(jī)”應(yīng)變
——淺談響應(yīng)式Web設(shè)計(jì)方法

文|曾瑤

隨著3G、4G的普及，媒體融合的發(fā)展，移動(dòng)設(shè)備正超過桌面設(shè)備，成為訪問互聯(lián)網(wǎng)的最常見終端。于是，幾乎每個(gè)網(wǎng)站都希望有專門的移動(dòng)設(shè)備版本。最完美的情況，就是為iPhone、iPad、主流Android設(shè)備……各自打造一款頁(yè)面。但不同設(shè)備的屏幕尺寸規(guī)格、分辨率甚至屏幕定向方式都可能不同，況且又如何應(yīng)對(duì)不斷被研發(fā)出來的各種新設(shè)備呢？在當(dāng)前多屏、多終端、多媒體融合發(fā)展新形式下如何讓我們的頁(yè)面隨“機(jī)”應(yīng)變，適應(yīng)各種設(shè)備終端？本文要介紹的響應(yīng)式Web設(shè)計(jì)就是一套可行解決方案。

響應(yīng)式Web設(shè)計(jì)的理念

響應(yīng)式Web設(shè)計(jì)是由Ethan Marcotte在2010年提出，其理念就是，頁(yè)面設(shè)計(jì)能自動(dòng)適應(yīng)設(shè)備環(huán)境（屏幕尺寸、分辨率和系統(tǒng)平臺(tái)等）和用戶行為（屏幕定向），實(shí)現(xiàn)一套頁(yè)面適配多種終端。主要的實(shí)現(xiàn)方法包含彈性布局、液態(tài)網(wǎng)格、液態(tài)圖片、媒體查詢（media query）的使用等多方面。

響應(yīng)式Web設(shè)計(jì)的方法

1、彈性布局（flexible layout）

我們可以通過響應(yīng)式的設(shè)計(jì)和開發(fā)思路讓頁(yè)面更加“彈性”，無論用戶切換設(shè)備的屏幕定向方式，還是從臺(tái)式機(jī)轉(zhuǎn)到iPad上瀏覽，頁(yè)面都會(huì)富有彈性。彈性布局使用獨(dú)立的樣式表，或者使用CSS media query。多數(shù)樣式設(shè)置不會(huì)被影響和改變，只有一些特定的元素會(huì)通過浮動(dòng)、寬度和高度等的設(shè)定發(fā)生變化。如果窗口或容器變的過窄或是過寬，則通過一個(gè)子級(jí)樣式表來繼承主樣式表的設(shè)定，并專門針對(duì)某些布局結(jié)構(gòu)進(jìn)行樣式覆寫。我們來看以下示例：

默認(rèn)主樣式表style.css（圖1）

子級(jí)樣式表mobile.css，專門針對(duì)移動(dòng)設(shè)備進(jìn)行樣式設(shè)置（圖2）：

圖1　

圖2　

再使用下文將重點(diǎn)論述的媒體查詢代碼，實(shí)現(xiàn)根據(jù)屏幕寬度，自動(dòng)加載不同樣式表（圖3）：

以上代碼實(shí)現(xiàn)的大致視覺效果如下圖所示（圖4）：

2、液態(tài)網(wǎng)格（fluid grid）

圖3　

圖4　

“液態(tài)網(wǎng)格”是指各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。各區(qū)塊的大小都采用百分比而不是使用絕對(duì)值。例如（圖5）：

圖5　

float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)浮動(dòng)到前面元素的下方，不會(huì)在水平方向溢出，避免出現(xiàn)水平滾動(dòng)條。

3、液態(tài)圖片（fluid image）

響應(yīng)式Web設(shè)計(jì)的思路中，一個(gè)重點(diǎn)考慮的因素是怎樣實(shí)現(xiàn)圖片的自動(dòng)縮放。這只要一行CSS代碼：

img ｛ max-width∶ 100%；｝

老版本的I E不支持m a xwidth，所以只好寫成：

img ｛ width∶ 100%； ｝

此外，windows平臺(tái)縮放圖片時(shí)，可能出現(xiàn)圖像失真現(xiàn)象。這時(shí)，可以嘗試使用IE的專有命令：

img ｛ -ms-interpolationmode∶ bicubic； ｝

或者，Ethan Marcotte的imgSizer.js（圖6）。

圖6　

圖7　

圖8　

只要沒有其他涉及到圖片寬度的樣式代碼覆蓋掉這行規(guī)則，且其容器可視部分的寬度不小于圖片原始寬度，圖片就會(huì)以其原始寬度進(jìn)行加載。同時(shí)當(dāng)窗口或容器變窄時(shí)，圖片的寬度也會(huì)相應(yīng)減小，保證圖片不會(huì)被容器隱藏或覆蓋。

4、媒體查詢（Media Queries）

實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)的關(guān)鍵技術(shù)是CSS3。CSS 3的media query是對(duì) media type（媒體類型）的一種增強(qiáng)，它為我們?cè)诓煌O(shè)備和環(huán)境下實(shí)現(xiàn)豐富的界面提供了一種方法。

CSS3添加了很多功能屬性，包括max-width（最大寬度）、devicewidth（設(shè)備寬度）、orientation（屏幕定向）。在CSS3發(fā)布之后出現(xiàn)的蘋果或Android設(shè)備，都可以很好的支持這些屬性。媒體查詢功能主要依賴于min-width和max-width這兩個(gè)屬性，可以同時(shí)判斷屏幕尺寸與瀏覽器實(shí)際寬度（圖7）。

以上代碼中定義的類（bigScreenClass）只有在瀏覽器或屏幕寬度超過720px時(shí)才會(huì)有效。

如果我們希望通過媒體查詢作用于某種特定的設(shè)備，而忽略其上運(yùn)行的瀏覽器與設(shè)備屏幕寬度不一致（比如沒有最大化）的情況，那么我們就需要使用min-devicewidth與max-device-width屬性來判斷設(shè)備本身的屏幕寬度（圖8）。

對(duì)于iPad來說，orientation屬性尤其有用（圖9）。

圖9　

但是，這個(gè)屬性目前只在iPad上有效。對(duì)于其他可以轉(zhuǎn)屏的設(shè)備，可以通過min-device-width和max-device-width來變通實(shí)現(xiàn)。

另外，我們還可以組合使用上述屬性，對(duì)某種屏幕尺寸范圍進(jìn)行鎖定，例如（圖10）：

圖10　

上述代碼可應(yīng)用于窗口或屏幕寬度在760px至1200px之間的所有設(shè)備。

其實(shí)，我們也可以選擇使用多個(gè)樣式表的方式來實(shí)現(xiàn)媒體查詢（如上文“彈性布局”小節(jié)中代碼示例），這樣做的好處是利于資源的組織和維護(hù)，但效率不高。

我們需要根據(jù)實(shí)際情況決定使用媒體查詢的方式。比如，對(duì)于iPad，就盡量將媒體查詢直接寫在一個(gè)樣式表中，因?yàn)槭褂胕Pad的用戶隨時(shí)可能切換屏幕定向，我們必須選擇效率最高的方式以保證頁(yè)面快速響應(yīng)屏幕尺寸的變化。

5、禁用圖片自動(dòng)縮放

圖11　

在蘋果的某些設(shè)備中，頁(yè)面將自動(dòng)同比例縮小至最適宜屏幕尺寸的大小，橫向不出現(xiàn)滾動(dòng)條，用戶可通過放大頁(yè)面的局部并進(jìn)行拖拽來瀏覽整個(gè)頁(yè)面。于是就會(huì)產(chǎn)生一個(gè)問題，我們應(yīng)用響應(yīng)式Web設(shè)計(jì)，專門為iPhone的小屏輸出的小圖片，也會(huì)隨著整個(gè)頁(yè)面一起被同比縮小。

使用meta標(biāo)記，禁用圖片自動(dòng)縮放可以解決類似問題。在頁(yè)面的〈head〉部分添加一行代碼：

viewport是網(wǎng)頁(yè)默認(rèn)的尺寸，代碼的意思是，頁(yè)面寬度默認(rèn)等于設(shè)備寬度（width=devicewidth），初始縮放比例（initialscale=1）為1，即網(wǎng)頁(yè)原始大小占屏幕面積的 100%，maximumscale 表示最大縮放比例。

包括IE9在內(nèi)的所有主流瀏覽器都支持這個(gè)屬性設(shè)置，而對(duì)于老式瀏覽器（主要是IE6、7、8），則需要使用css3-mediaqueries.js腳本。

6、使用相對(duì)值

響應(yīng)式web頁(yè)面要根據(jù)屏幕尺寸調(diào)整布局，因此不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素，即我們的CSS代碼不能指定像素值寬度，而要指定百分比寬度：width∶ xx%或者width∶ auto。字體也不能使用絕對(duì)大?。╬x），而只能使用相對(duì)大?。╡m）。另外，絕對(duì)定位（position∶ absolute）的使用，也要非常小心。

響應(yīng)式web設(shè)計(jì)的應(yīng)用

目前響應(yīng)式web設(shè)計(jì)現(xiàn)在還是個(gè)很時(shí)髦的技術(shù)，而蘋果官網(wǎng)已經(jīng)成功實(shí)現(xiàn)，不愧為為IT領(lǐng)域的時(shí)尚代表。

響應(yīng)式web設(shè)計(jì)的優(yōu)缺點(diǎn)

響應(yīng)式 Web 設(shè)計(jì)是當(dāng)前媒體融合，移動(dòng)互聯(lián)網(wǎng)應(yīng)用及終端被廣泛使用的新形勢(shì)下產(chǎn)生的需求，它的優(yōu)點(diǎn)是顯而易見的：

1. 響應(yīng)式Web 設(shè)計(jì)向用戶提供的 Web 界面可以適應(yīng)多樣化的設(shè)備屏幕。隨著移動(dòng)終端越來越多，有利于提升用戶體驗(yàn)。

2. 由于響應(yīng)式網(wǎng)站只需設(shè)計(jì)一個(gè)布局便可適配所有類型的設(shè)備，維護(hù)成本大大降低，可以明顯地減少您的工作量。而開發(fā)一個(gè)獨(dú)立的移動(dòng)網(wǎng)站，則需要維護(hù)兩個(gè)網(wǎng)站，而且還涉及到兩個(gè)網(wǎng)站的數(shù)據(jù)同步。

但響應(yīng)式web設(shè)計(jì)并不完美，它不是萬能解決方案，并不能真正替代移動(dòng)網(wǎng)站。主要表現(xiàn)在：

1. 對(duì)于CPU和資源都緊張的移動(dòng)設(shè)備來講，下載了一些不必要的HTML/CSS、圖片等資源，占用帶寬。

2. 由于響應(yīng)式 Web 設(shè)計(jì)方法主要依賴于CSS3，很多老版本的瀏覽器并不能很好的支持。

（作者單位：新華社技術(shù)局）