讓您的頁面隨“機”應變
——淺談響應式Web設計方法

文|曾瑤

讓您的頁面隨“機”應變
——淺談響應式Web設計方法

文|曾瑤

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

響應式Web設計的理念

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

響應式Web設計的方法

1、彈性布局（flexible layout）

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

默認主樣式表style.css（圖1）

子級樣式表mobile.css，專門針對移動設備進行樣式設置（圖2）：

圖1　

圖2　

再使用下文將重點論述的媒體查詢代碼，實現根據屏幕寬度，自動加載不同樣式表（圖3）：

以上代碼實現的大致視覺效果如下圖所示（圖4）：

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

圖3　

圖4　

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

圖5　

float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動浮動到前面元素的下方，不會在水平方向溢出，避免出現水平滾動條。

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

響應式Web設計的思路中，一個重點考慮的因素是怎樣實現圖片的自動縮放。這只要一行CSS代碼：

img ｛ max-width∶ 100%；｝

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

img ｛ width∶ 100%； ｝

此外，windows平臺縮放圖片時，可能出現圖像失真現象。這時，可以嘗試使用IE的專有命令：

img ｛ -ms-interpolationmode∶ bicubic； ｝

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

圖6　

圖7　

圖8　

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

4、媒體查詢（Media Queries）

實現響應式Web設計的關鍵技術是CSS3。CSS 3的media query是對 media type（媒體類型）的一種增強，它為我們在不同設備和環(huán)境下實現豐富的界面提供了一種方法。

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

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

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

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

圖9　

但是，這個屬性目前只在iPad上有效。對于其他可以轉屏的設備，可以通過min-device-width和max-device-width來變通實現。

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

圖10　

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

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

我們需要根據實際情況決定使用媒體查詢的方式。比如，對于iPad，就盡量將媒體查詢直接寫在一個樣式表中，因為使用iPad的用戶隨時可能切換屏幕定向，我們必須選擇效率最高的方式以保證頁面快速響應屏幕尺寸的變化。

5、禁用圖片自動縮放

圖11　

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

使用meta標記，禁用圖片自動縮放可以解決類似問題。在頁面的〈head〉部分添加一行代碼：

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

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

6、使用相對值

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

響應式web設計的應用

目前響應式web設計現在還是個很時髦的技術，而蘋果官網已經成功實現，不愧為為IT領域的時尚代表。

響應式web設計的優(yōu)缺點

響應式 Web 設計是當前媒體融合，移動互聯網應用及終端被廣泛使用的新形勢下產生的需求，它的優(yōu)點是顯而易見的：

1. 響應式Web 設計向用戶提供的 Web 界面可以適應多樣化的設備屏幕。隨著移動終端越來越多，有利于提升用戶體驗。

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

但響應式web設計并不完美，它不是萬能解決方案，并不能真正替代移動網站。主要表現在：

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

2. 由于響應式 Web 設計方法主要依賴于CSS3，很多老版本的瀏覽器并不能很好的支持。

（作者單位：新華社技術局）