面向移動終端的屏幕自適應(yīng)網(wǎng)頁設(shè)計(jì)

洪勇軍

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

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

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

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

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

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

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

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

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

2.1 媒體查詢

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

一個(gè)媒體查詢通常由一個(gè)媒體類型聲明和至少一個(gè)借助媒體特征來限定樣式表作用范圍的表達(dá)式組成。常用的媒體類型包括screen、print等，其中 screen代表計(jì)算機(jī)/手機(jī)屏幕，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)部各個(gè)部分使用百分比寬度或固定寬度（通常使用固定寬度）來表示。由于最外層的容器寬度是固定不變的，所以不論訪問者的瀏覽器分辨率是多少，他們所看到的網(wǎng)頁寬度都是一樣的。而流式布局則不同，主要使用百分比來設(shè)置各個(gè)部分的寬度，結(jié)合CSS中的元素浮動屬性（float），可以讓網(wǎng)頁中的元素根據(jù)頁面寬度變化自動調(diào)整自身寬度及位置，以適應(yīng)不同的屏幕分辨率。

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

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

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

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

3.2 劃分分辨率范圍

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

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

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

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

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

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

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

目前已經(jīng)得到廣泛支持的媒體查詢技術(shù)，結(jié)合流式布局可以較低的成本設(shè)計(jì)出能自動適配各類屏幕的網(wǎng)頁，為各類設(shè)備提供良好的訪問體驗(yàn)。當(dāng)然，這種方法也存在一定的不足，在部分情況下頁面效果不如針對特定屏幕專門設(shè)計(jì)的網(wǎng)頁好，有些時(shí)候網(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è)計(jì)：HTML5和 CSS實(shí)戰(zhàn)[M].王永強(qiáng)譯.北京：人民郵電出版社，2013.