洪勇軍

（連云港職業(yè)技術(shù)學(xué)院，江蘇 連云港 222006）

目前，為了給所有用戶帶來一致的瀏覽體驗，在Web應(yīng)用系統(tǒng)開發(fā)實踐中，普遍采用固定寬度網(wǎng)頁設(shè)計模式，也就是先按照最常用的終端屏幕尺寸設(shè)定網(wǎng)頁寬度，設(shè)計網(wǎng)頁中各元素。制作出來的網(wǎng)頁在傳統(tǒng)的臺式機、筆記本電腦屏幕上均能帶來較好的效果。但是，近年來智能手機、平板電腦等各類新型設(shè)備不斷涌現(xiàn)，使固定寬度網(wǎng)頁設(shè)計模式面臨越來越大的挑戰(zhàn)：這些設(shè)備的屏幕尺寸普遍比較小，所支持的分辨率也千差萬別，顯示方向還可切換。大多數(shù)原來按固定寬度模式設(shè)計的網(wǎng)頁在很多新型設(shè)備上的顯示效果都不好，而針對各種不同類型屏幕分別制作網(wǎng)頁的成本又太高。

2009年 3月，MARCOTTE E探討了在 Web布局網(wǎng)格中引入百分比寬度以實現(xiàn)流式布局的基本原理[1]；2010年5月，在此基礎(chǔ)上，他又正式提出了響應(yīng)式Web設(shè)計這一理念，即借助媒體查詢技術(shù)自動檢測屏幕分辨率并有選擇地加載CSS規(guī)則、同時結(jié)合流式布局方法，實現(xiàn)網(wǎng)頁對屏幕的自適應(yīng)處理[2]。此方法一經(jīng)提出，受到了業(yè)界的廣泛關(guān)注，在開發(fā)實踐中得到了越來越多的應(yīng)用，并進一步得到了不斷的完善與發(fā)展。

1 屏幕自適應(yīng)網(wǎng)頁設(shè)計的基本原理

為了更好地實現(xiàn)內(nèi)容與表現(xiàn)的分離，目前的網(wǎng)頁通常都是綜合應(yīng)用HTML和CSS進行設(shè)計，HTML標記決定網(wǎng)頁內(nèi)容，CSS規(guī)則控制網(wǎng)頁效果。因此，要讓相同的網(wǎng)頁能自動適應(yīng)不同大小的終端屏幕，關(guān)鍵在于針對不同分辨率的屏幕分別設(shè)計不同的CSS規(guī)則，讓瀏覽器加載網(wǎng)頁時先檢測屏幕分辨率并自動選用合適的CSS規(guī)則渲染網(wǎng)頁。

目前各種新型設(shè)備不斷涌現(xiàn)，所配屏幕的物理尺寸越來越大，屏幕分辨率也越來越高，直接導(dǎo)致了應(yīng)用開發(fā)實踐中屏幕適配復(fù)雜度越來越大。幸運的是，對網(wǎng)頁布局效果起決定性作用的是網(wǎng)頁可用的CSS像素寬度，為盡可能保證老網(wǎng)頁在新設(shè)備中也能較好展現(xiàn)，降低CSS設(shè)計難度，當(dāng)前主流手機瀏覽器都采用了將CSS像素與設(shè)備屏幕物理像素相分離的方式，將高分辨率設(shè)備中的多個物理像素映射為一個CSS像素。這樣，物理像素參數(shù)差別很大的設(shè)備中CSS像素寬度參數(shù)完全可能是相同的[3]。例如iPhone的屏幕物理像素規(guī)格為320×480，iPhone4/iPhone4S的屏幕物理像素規(guī)格為 640×960，但其手機瀏覽器中所用的 CSS像素規(guī)格均為320×480。iPhone4/iPhone4S中4個物理像素被映射成了1個CSS像素，這樣，在設(shè)計網(wǎng)頁時，iPhone、iPhone4/iPhone4S事實上可以看作同一種設(shè)備進行適配。

為進一步降低CSS設(shè)計難度，可以將CSS像素寬度接近的幾種設(shè)備歸為一組統(tǒng)一處理。為使同一組CSS規(guī)則能適應(yīng)分辨率接近的幾種屏幕，在使用CSS進行網(wǎng)頁布局時，也必須采用不同于固定寬度網(wǎng)頁設(shè)計的方式，網(wǎng)頁元素寬度不能使用固定像素的方式指定，而應(yīng)使用比例寬度，使其能自動縮放，對于部分可能超出屏幕寬度的網(wǎng)頁元素應(yīng)根據(jù)實際情況關(guān)閉其顯示或允許其浮動。

要達到上述效果，需要綜合使用媒體查詢與流式布局技術(shù)。

2 屏幕自適應(yīng)網(wǎng)頁設(shè)計的關(guān)鍵技術(shù)

2.1 媒體查詢

媒體查詢是CSS3中定義的一個附加模塊，可用于檢測一些常用的媒體特征，已經(jīng)得到絕大多數(shù)桌面及手機瀏覽器的良好支持。

一個媒體查詢通常由一個媒體類型聲明和至少一個借助媒體特征來限定樣式表作用范圍的表達式組成。常用的媒體類型包括screen、print等，其中 screen代表計算機/手機屏幕，print代表文檔打印或打印預(yù)覽屏幕。媒體查詢可檢測的常用媒體特征主要包括設(shè)備寬度（device-width）、設(shè)備高度（device-height）、顯示區(qū)域?qū)挾龋╳idth）、顯示區(qū)域高度（height）、設(shè)備方向（orientation）、設(shè)備寬高比 （device-aspect-ratio）、顯示區(qū)域?qū)捀弑龋╝spect-ratio）等[3]。

媒體查詢的基本形式如下所示：

根據(jù)以上規(guī)則，如果屏幕CSS像素寬度介于320～480之間，則將頁面背景色設(shè)置為淺黃色。

2.2 流式布局

所謂流式布局是相對于目前廣泛采用的固定布局來說的。固定布局使用固定寬度（如960像素）的容器，內(nèi)部各個部分使用百分比寬度或固定寬度（通常使用固定寬度）來表示。由于最外層的容器寬度是固定不變的，所以不論訪問者的瀏覽器分辨率是多少，他們所看到的網(wǎng)頁寬度都是一樣的。而流式布局則不同，主要使用百分比來設(shè)置各個部分的寬度，結(jié)合CSS中的元素浮動屬性（float），可以讓網(wǎng)頁中的元素根據(jù)頁面寬度變化自動調(diào)整自身寬度及位置，以適應(yīng)不同的屏幕分辨率。

另外，為使網(wǎng)頁能更好地適應(yīng)各種屏幕，使用流式布局時頁面中的字體尺寸也應(yīng)使用相對尺寸。通常的做法是在CSS中先以像素形式為body標簽指定一種字體大小作為基準，然后在其他需要指定字體大小的地方都以em作單位。em是相對大小單位，其實際大小是相對于其上下文字體大小而言的。例如若指定某元素字體大小為1.5 em，則表示該元素字體大小應(yīng)為其上下文（所在容器）字體大小的1.5倍，依此類推。采用這種方式，如果需要整體改變網(wǎng)頁中字體大小，就只需要修改作為基準的body標簽中字體屬性即可[4]。

3 設(shè)計屏幕自適應(yīng)網(wǎng)頁的基本步驟

3.1 調(diào)查目標終端屏幕特性

結(jié)合項目特點，分析項目主流用戶可能使用的終端設(shè)備的屏幕特性，主要包括屏幕的分辨率、方向等。具體說來，一方面，由于對網(wǎng)頁渲染效果影響最大的是瀏覽器所用CSS像素寬度，并非設(shè)備物理像素寬度，調(diào)查時需要重點了解設(shè)備的CSS像素寬度；另一方面，手機通常是豎屏使用，而平板電腦則通常是橫屏使用，在考慮設(shè)備屏幕寬度數(shù)據(jù)時需要注意。

3.2 劃分分辨率范圍

目前各類終端的屏幕分辨率特性千差萬別，具有更高分辨率的新設(shè)備不斷涌現(xiàn)。所幸的是目前高分辨率設(shè)備中使用的瀏覽器通常都作了像素映射處理，使得瀏覽器中使用的CSS像素寬度參數(shù)復(fù)雜度有所降低?，F(xiàn)階段在移動Web開發(fā)實踐中需要重點關(guān)注的設(shè)備CSS像素寬度主要包括 320、360、480、540 及 640。

3.3 結(jié)合媒體查詢設(shè)計CSS規(guī)則組

首先針對最常用的設(shè)備屏幕設(shè)計默認的CSS規(guī)則組，然后根據(jù)分辨率范圍分組的結(jié)果，使用媒體查詢定義相應(yīng)的查詢表達式，并為符合特征要求的一組屏幕定義匹配的特定CSS規(guī)則如下所示：

另外，在具體頁面的CSS規(guī)則設(shè)計過程中，應(yīng)貫徹只為最外層容器指定像素寬度，其余元素均使用百分比寬度的原則，在指定字體時，也只為最外層容器（通常是body）指定像素尺寸，其余元素的字體一律使用相對大小單位em。同時，對于在同一分辨率范圍內(nèi)部分情況下可能超出屏幕寬度的元素可以設(shè)置float或display屬性，使其在屏幕寬度范圍內(nèi)自動浮動或干脆隱藏這些元素。

3.4 網(wǎng)頁屏幕自適應(yīng)性的測試

要測試網(wǎng)頁的屏幕自適應(yīng)性設(shè)計效果，最理想的方式是直接使用特定的目標設(shè)備來訪問相關(guān)網(wǎng)頁，但這種方式在很多時候由于各種原因是不可行的。更可行的方式是在通用PC瀏覽器中借助某種視口調(diào)試工具來完成測試。以在Web開發(fā)者中使用較廣泛的Firefox瀏覽器為例，可以直接使用其內(nèi)置“Web開發(fā)者”工具組中的“自適應(yīng)設(shè)計視圖”工具。啟用“自適應(yīng)設(shè)計視圖”以后，F(xiàn)irefox將會顯示一個視口大小下拉列表，用于指定查看網(wǎng)頁時的視口大小以模擬特定類型屏幕，這樣就可以直觀地觀察網(wǎng)頁在不同屏幕上的實際效果。

隨著移動互聯(lián)網(wǎng)的快速發(fā)展，來自各類移動設(shè)備對Web系統(tǒng)的訪問所占比重越來越高，市場對能滿足移動設(shè)備訪問要求的屏幕自適應(yīng)Web系統(tǒng)的需求也越來越大。

目前已經(jīng)得到廣泛支持的媒體查詢技術(shù)，結(jié)合流式布局可以較低的成本設(shè)計出能自動適配各類屏幕的網(wǎng)頁，為各類設(shè)備提供良好的訪問體驗。當(dāng)然，這種方法也存在一定的不足，在部分情況下頁面效果不如針對特定屏幕專門設(shè)計的網(wǎng)頁好，有些時候網(wǎng)頁元素還可能會存在一定的變形。

[1]Ethan Marcotte.Fluid Grids[E/OL].http：//alistapart.com/article/fluidgrids.

[2]Ethan Marcotte.ResponsiveWeb Design [E/OL].http：//alistapart.com/article/responsive-web-design.

[3]CSS media queries[E/OL].https：//developer.mozilla.org/en-US/docs/CSS/Media_queries.

[4]Ben Frain.響應(yīng)式 Web設(shè)計：HTML5和 CSS實戰(zhàn)[M].王永強譯.北京：人民郵電出版社，2013.