響應式網站的自由美學
搜網誌
作者：鄭建鵬
近年來，隨著移動互聯網的迅猛發展，在網站瀏覽方麵，以智能手機、平板電腦為主要媒介的移動設備開始具備了同個人電腦分庭抗禮的實力。但設備的不同尺寸也使得專為PC設計的網站遭遇到屏幕顯示不對應的尷尬。很多網站的解決方案是為智能手機或平板電腦用戶另外設計專供其瀏覽的網站，這無形之中又增加了網站建設與維護的成本。對此，2010年美國網頁設計師、暢銷書作家Ethan Marcotte提出Responsive Web Design的概念，國內譯為自適應網站設計或響應式網站設計，即可以自動識別顯示設備屏幕寬度，並做出相應調整的網頁設計。
響應式網站設計的核心是CSS3的“Media Query”（媒體識別）模塊，即自動探測屏幕寬度，然後加載相應的CSS文件。在編寫CSS代碼時，適應式網站允許網頁寬度自動調整；不指定像素絕對寬度，而是用百分比寬度；頁麵文字不指定絕對大小，而使用百分比的相對大小；同時，各個區塊如網站Logo、導航、圖片欄目等的位置皆設定為浮動的，而不是在固定位置一成不變，圖片也設定為可以根據屏幕大小自由縮放。響應式網站一改PC網站因為柵格結構決定的固定形態，創造了一種可以隨屏調節、自由變換的和諧與適度美學。
響應式網站的自由、適度與和諧首先體現為移動設備顯示頁麵Logo位置的設計上，PC端網站Logo一般位於頁麵左上方，對於較大視覺範圍來說，左上方為視覺流程的起點，是瀏覽者最先關注的地方。而到了Samsung Galaxy屏幕上時，網站Logo則被轉移至頁麵上方居中位置。因為在較小的視覺範圍內，若仍按左齊頭方式編排Logo，很容易造成視覺失衡。不僅網站Logo如此，導航與Logo之間的位置關係也會因屏幕尺寸變化而進行自由的變換調整，以保持在特定空間內的最佳視覺效果。一個美食分享網站，Logo為黑底白字的“食物感官”圓標，導航則列於首頁左側，並結合手繪圖標展示。進入智能手機端頁麵後，原本在頁麵左上角的網站Logo被調整至居中，而原本左側豎式排列的導航在隱藏掉圖標後，被調整至新頁麵的最頂端。
不僅區塊少、結構簡單的網站可以從容實現適應性轉換與和諧平衡，一些內容及層次較為複雜的網站亦能實現很好的自適應效果。《波士頓環球報》的網站，作為波士頓發行量最大的報紙，其網站信息容量極大，但iPhone移動端頁麵將這些內容很好地融合進狹長的屏幕空間內，然後有條理地通過上下滾動條依次呈現。