摘  要： 分析了屏幕自適應網頁設計的基本原理，系統闡述了綜合運用媒體查詢技術與流式布局設計屏幕自適應網頁的方法，探討了使用PC瀏覽器測試網頁屏幕自適應性的簡便方法。
關鍵詞： 屏幕自適應網頁設計；媒體查詢；流式布局

　目前，為了給所有用戶帶來一致的瀏覽體驗，在Web應用系統開發實踐中，普遍采用固定寬度網頁設計模式，也就是先按照最常用的終端屏幕尺寸設定網頁寬度，設計網頁中各元素。制作出來的網頁在傳統的臺式機、筆記本電腦屏幕上均能帶來較好的效果。但是，近年來智能手機、平板電腦等各類新型設備不斷涌現，使固定寬度網頁設計模式面臨越來越大的挑戰：這些設備的屏幕尺寸普遍比較小，所支持的分辨率也千差萬別，顯示方向還可切換。大多數原來按固定寬度模式設計的網頁在很多新型設備上的顯示效果都不好，而針對各種不同類型屏幕分別制作網頁的成本又太高。
　2009年3月，MARCOTTE E探討了在Web布局網格中引入百分比寬度以實現流式布局的基本原理[1]；2010年5月，在此基礎上，他又正式提出了響應式Web設計這一理念，即借助媒體查詢技術自動檢測屏幕分辨率并有選擇地加載CSS規則、同時結合流式布局方法，實現網頁對屏幕的自適應處理[2]。此方法一經提出，受到了業界的廣泛關注，在開發實踐中得到了越來越多的應用，并進一步得到了不斷的完善與發展。
1 屏幕自適應網頁設計的基本原理
　為了更好地實現內容與表現的分離，目前的網頁通常都是綜合應用HTML和CSS進行設計，HTML標記決定網頁內容，CSS規則控制網頁效果。因此，要讓相同的網頁能自動適應不同大小的終端屏幕，關鍵在于針對不同分辨率的屏幕分別設計不同的CSS規則，讓瀏覽器加載網頁時先檢測屏幕分辨率并自動選用合適的CSS規則渲染網頁。
　目前各種新型設備不斷涌現，所配屏幕的物理尺寸越來越大，屏幕分辨率也越來越高，直接導致了應用開發實踐中屏幕適配復雜度越來越大。幸運的是，對網頁布局效果起決定性作用的是網頁可用的CSS像素寬度，為盡可能保證老網頁在新設備中也能較好展現，降低CSS設計難度，當前主流手機瀏覽器都采用了將CSS像素與設備屏幕物理像素相分離的方式，將高分辨率設備中的多個物理像素映射為一個CSS像素。這樣，物理像素參數差別很大的設備中CSS像素寬度參數完全可能是相同的[3]。例如iPhone的屏幕物理像素規格為320×480，iPhone4/iPhone4S的屏幕物理像素規格為640×960，但其手機瀏覽器中所用的CSS像素規格均為320×480。iPhone4/iPhone4S中4個物理像素被映射成了1個CSS像素，這樣，在設計網頁時，iPhone、iPhone4/iPhone4S事實上可以看作同一種設備進行適配。
　為進一步降低CSS設計難度，可以將CSS像素寬度接近的幾種設備歸為一組統一處理。為使同一組CSS規則能適應分辨率接近的幾種屏幕，在使用CSS進行網頁布局時，也必須采用不同于固定寬度網頁設計的方式，網頁元素寬度不能使用固定像素的方式指定，而應使用比例寬度，使其能自動縮放，對于部分可能超出屏幕寬度的網頁元素應根據實際情況關閉其顯示或允許其浮動。
要達到上述效果，需要綜合使用媒體查詢與流式布局技術。
2 屏幕自適應網頁設計的關鍵技術
2.1 媒體查詢
　媒體查詢是CSS3中定義的一個附加模塊，可用于檢測一些常用的媒體特征，已經得到絕大多數桌面及手機瀏覽器的良好支持。
　一個媒體查詢通常由一個媒體類型聲明和至少一個借助媒體特征來限定樣式表作用范圍的表達式組成。常用的媒體類型包括screen、print等，其中screen代表計算機/手機屏幕，print代表文檔打印或打印預覽屏幕。媒體查詢可檢測的常用媒體特征主要包括設備寬度（device-width）、設備高度（device-height）、顯示區域寬度（width）、顯示區域高度（height）、設備方向（orientation）、設備寬高比（device-aspect-ratio）、顯示區域寬高比（aspect-ratio）等[3]。
　媒體查詢的基本形式如下所示：
@media screen and（max-width：480px）and（min-width：320px）{
    body{
        background-color：lightyellow；
}
……
}
　根據以上規則，如果屏幕CSS像素寬度介于320~480之間，則將頁面背景色設置為淺黃色。
2.2 流式布局
　所謂流式布局是相對于目前廣泛采用的固定布局來說的。固定布局使用固定寬度（如960像素）的容器，內部各個部分使用百分比寬度或固定寬度（通常使用固定寬度）來表示。由于最外層的容器寬度是固定不變的，所以不論訪問者的瀏覽器分辨率是多少，他們所看到的網頁寬度都是一樣的。而流式布局則不同，主要使用百分比來設置各個部分的寬度，結合CSS中的元素浮動屬性（float），可以讓網頁中的元素根據頁面寬度變化自動調整自身寬度及位置，以適應不同的屏幕分辨率。
　另外，為使網頁能更好地適應各種屏幕，使用流式布局時頁面中的字體尺寸也應使用相對尺寸。通常的做法是在CSS中先以像素形式為body標簽指定一種字體大小作為基準，然后在其他需要指定字體大小的地方都以em作單位。em是相對大小單位，其實際大小是相對于其上下文字體大小而言的。例如若指定某元素字體大小為1.5 em，則表示該元素字體大小應為其上下文（所在容器）字體大小的1.5倍，依此類推。采用這種方式，如果需要整體改變網頁中字體大小，就只需要修改作為基準的body標簽中字體屬性即可[4]。
3 設計屏幕自適應網頁的基本步驟
3.1 調查目標終端屏幕特性
　結合項目特點，分析項目主流用戶可能使用的終端設備的屏幕特性，主要包括屏幕的分辨率、方向等。具體說來，一方面，由于對網頁渲染效果影響最大的是瀏覽器所用CSS像素寬度，并非設備物理像素寬度，調查時需要重點了解設備的CSS像素寬度；另一方面，手機通常是豎屏使用，而平板電腦則通常是橫屏使用，在考慮設備屏幕寬度數據時需要注意。
3.2 劃分分辨率范圍
　目前各類終端的屏幕分辨率特性千差萬別，具有更高分辨率的新設備不斷涌現。所幸的是目前高分辨率設備中使用的瀏覽器通常都作了像素映射處理，使得瀏覽器中使用的CSS像素寬度參數復雜度有所降低。現階段在移動Web開發實踐中需要重點關注的設備CSS像素寬度主要包括320、360、480、540及640。
3.3 結合媒體查詢設計CSS規則組
　首先針對最常用的設備屏幕設計默認的CSS規則組，然后根據分辨率范圍分組的結果，使用媒體查詢定義相應的查詢表達式，并為符合特征要求的一組屏幕定義匹配的特定CSS規則如下所示：
@media screen and（max-width：320px）{
body{
        Font-size： 14px；
        Font-size： 1em；
        Background-color： lightyellow；
        ……
    }
    ……
}
@media screen and （min-width： 321px） and （max-width： 360px）{
    ……
}
……
　另外，在具體頁面的CSS規則設計過程中，應貫徹只為最外層容器指定像素寬度，其余元素均使用百分比寬度的原則，在指定字體時，也只為最外層容器（通常是body）指定像素尺寸，其余元素的字體一律使用相對大小單位em。同時，對于在同一分辨率范圍內部分情況下可能超出屏幕寬度的元素可以設置float或display屬性，使其在屏幕寬度范圍內自動浮動或干脆隱藏這些元素。
3.4 網頁屏幕自適應性的測試

　要測試網頁的屏幕自適應性設計效果，最理想的方式是直接使用特定的目標設備來訪問相關網頁，但這種方式在很多時候由于各種原因是不可行的。更可行的方式是在通用PC瀏覽器中借助某種視口調試工具來完成測試。以在Web開發者中使用較廣泛的Firefox瀏覽器為例，可以直接使用其內置“Web開發者”工具組中的“自適應設計視圖”工具。啟用“自適應設計視圖”以后，Firefox將會顯示一個視口大小下拉列表，用于指定查看網頁時的視口大小以模擬特定類型屏幕，這樣就可以直觀地觀察網頁在不同屏幕上的實際效果。
隨著移動互聯網的快速發展，來自各類移動設備對Web系統的訪問所占比重越來越高，市場對能滿足移動設備訪問要求的屏幕自適應Web系統的需求也越來越大。
　目前已經得到廣泛支持的媒體查詢技術，結合流式布局可以較低的成本設計出能自動適配各類屏幕的網頁，為各類設備提供良好的訪問體驗。當然，這種方法也存在一定的不足，在部分情況下頁面效果不如針對特定屏幕專門設計的網頁好，有些時候網頁元素還可能會存在一定的變形。
參考文獻
[1] Ethan Marcotte. Fluid Grids[E/OL]. http：//alistapart.com/article/fluidgrids.
[2] Ethan Marcotte. Responsive Web 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.響應式Web設計：HTML5和CSS實戰[M].王永強譯.北京：人民郵電出版社，2013.