邢 希，田興彥，王世運

(瓊州學院電子信息工程學院，海南 三亞 572022)

0 引言

隨著時代的發(fā)展，網(wǎng)絡用戶使用小屏幕設備(如平板電腦、手機)上網(wǎng)已成為趨勢，另外，超大屏幕的顯示器也在快速普及，從而導致上網(wǎng)設備的尺寸差距與日俱增.面對形形色色的終端，千差萬別的屏幕分辨率，目前的網(wǎng)頁設計方法顯得有些力不從心，而我們不太可能為每種設備專門設計一套網(wǎng)站.在這樣的環(huán)境下，采用基于HTML5 和CSS3 技術的響應式網(wǎng)頁設計方式應運而生.

響應式網(wǎng)頁設計(Responsive Web Design)結合了媒體查詢、流式布局和彈性圖片等技術手段，是能針對任意設備對網(wǎng)頁內容進行完美布局的一種顯示機制［1］.通過響應式的設計方式，能使網(wǎng)站頁面隨瀏覽設備的不同而自行響應，動態(tài)調整布局結構和元素的規(guī)格樣式，將相同的內容以不同的布局呈現(xiàn)給不同終端的用戶.如圖1 所示.

圖1 響應式網(wǎng)頁設計概念圖

1 CSS3 中的媒體查詢模塊

媒體查詢是響應式網(wǎng)頁設計方法的核心，由媒體類型和檢測媒體特性的條件表達式組成，可以讓CSS更加精確作用于不同的媒體或同一媒體的不同條件.

1.1 媒體查詢使用方法［2］將如下代碼片段插入某個CSS 文件中:

預覽與之相關聯(lián)的頁面并不斷調整瀏覽器窗口寬度.頁面的背景顏色會根據(jù)當時的窗口寬度發(fā)生相應變化.比如:當寬度不超過320px 時，頁面背景顏色為綠色;當寬度在320px～550px 之間時，背景顏色為藍色，以此類推.

另外，還可以通過＜link＞標簽中的media 和href 屬性來為某種特定的設備指定相應的樣式.比如要指定窗口寬度大于800px 的縱向放置顯示屏相應的樣式表，可通過如下所示代碼片段引入:

1.2 媒體查詢可檢測到的特性 媒體查詢最常用于檢測獲取設備的可視區(qū)域寬度(width)，設備屏幕寬度(device-width)和設備的手持方向(orientation)，除此之外，還有畫面寬高比(aspect-ratio)，每種顏色的位數(shù)(color)，顏色索引表(color-index)和設備分辨率(resolution)等等.大部分特性都可以搭配max 和min 前綴來限定一個查詢范圍.

1.3 瀏覽器的兼容性問題［3］IE 瀏覽器(IE9 以下版本)并不支持CSS3 的媒體查詢，因此可以通過JQuery 腳本來實現(xiàn)媒體查詢相關特性.引入JQuery 后，用它獲取瀏覽器窗口的寬度，代碼如下:

然后通過條件語句判斷screenWidth 的值是否在某寬度范圍內，從而實現(xiàn)媒體查詢中“max-width”和“min-width”的劃定范圍的功能.

另外，也有很多能給老版本IE 添加媒體查詢支持的墊片腳本，比如Scott Jehl 開發(fā)的Respond.js 使用起來就非常方便，直接在頁面文件中引入即可.

2 流式布局

網(wǎng)頁僅通過媒體查詢來劃分窗口寬度范圍，會從一組查詢規(guī)則突變至另一組，中間沒有經(jīng)過平滑的漸變;而且會導致規(guī)則寬度范圍之外的頁面需要水平滾動才能完整瀏覽，具有一定的局限性.為了解決這個問題，我們需要使用由百分比定義網(wǎng)頁內容寬度并設置CSS 浮動屬性的流式布局［4］.

2.1 百分比布局 當前，設計和制作網(wǎng)頁的習慣都是采用具體的尺寸，當用戶縮小瀏覽器窗口時，就會發(fā)現(xiàn)一部分網(wǎng)頁內容沒有出現(xiàn)，并且需要移動水平滾動條才能看到被遮住的內容.要制作響應式的網(wǎng)頁，就需要將固定尺寸轉換為相對尺寸.Ethan Marcotte 提供了一個簡易的轉換公式:目標元素寬度÷父級元素寬度=百分比寬度.比如，如果定義一個div 的寬度為div#sub_nav {width:80%}，那么div#sub_nav 的寬度就是其父級元素寬度的80%.這樣無論瀏覽器的大小如何改變，div#sub_nav 的寬度也始終和其父級元素保持這個比例關系，達到一個自適應的效果.需要注意的是，要保證元素都是使用百分比定義寬度，這樣就能使頁面在任意尺寸的設備中以一致的布局方式呈現(xiàn).

2.2 設置CSS 浮動屬性 由于某些特殊的要求，有時我們會希望頁面中的內容寬度是固定值，比如左內容欄(div#left)為300px，右內容欄(div#right)為300px，為了解決縮小窗口后部分內容會被隱藏的問題，可以給左右內容欄都設置浮動屬性:div#left，div#right {width:300px;float:left;}，這樣會出現(xiàn)雙欄布局，當父級元素的寬度小于600px 時，右內容欄會因為空間不夠而跑到左內容欄的下面，形成單欄布局，從而防止了內容被隱藏，出現(xiàn)水平滾動條的情況.需要注意的是瀏覽器窗口小于300px 時頁面內容還是會被隱藏，因為左右內容欄的寬度都不是用百分比來定義的.

3 自適應的文字和圖片

響應式頁面設計中除了頁面結構可以自適應縮放之外，文字和圖片也要能相應地實現(xiàn)大小隨窗口尺寸自適應變化.

3.1 用em 替換px 使用em 替換px 是為了實現(xiàn)文字的自適應縮放，可以給響應式網(wǎng)頁的設計、開發(fā)和維護帶來很多便利.em 的大小也是相對其父級元素的字體大小而言的，同樣，“目標元素尺寸÷父級元素尺寸=百分比尺寸”這個公式也適用于將文字的固定尺寸轉換為相對尺寸.如果將＜body＞標簽中的文字設置為100%，其他文字都使用相對單位em，那么這些文字都會受body 中設置的影響.

3.2 彈性圖片［5］要讓圖片自適應縮放.使用CSS 的max-width 屬性來實現(xiàn)彈性圖片是比較常用的做法.如設置img {max-width:50%}，就可以使圖片自動縮放到與其容器按50%的比例匹配.需要注意的是，圖片尺寸需要比其顯示尺寸更大以保證渲染效果，否則圖片會因過度拉伸而變得模糊，另外最好給彈性圖片追加一個閾值，如一張圖片的實際寬度為200px，則可以設置img {width:50%;max-width:200px;}，這樣就可以保證圖片的自由縮放，而且也不會超出正常顯示的尺寸范圍.

彈性圖片存在一定的問題，由于需要圖片尺寸比其顯示尺寸大，導致不管什么設備，都要下載超大的圖片.為了解決這個問題，兼顧小屏幕和大屏幕，引進了“響應式圖片”的概念.

3.3 響應式圖片［6］“響應式圖片”的思想是由Filament Group 提出的，能解決上面提到的問題:同比的縮放圖片，且在小設備上能降低圖片的分辨率.大致原理是利用js 腳本來檢測當前設備的屏幕分辨率，根據(jù)檢測結果給大屏幕設備添加BASE 標記，并將相應的圖片、腳本和樣式表加載請求定向到一個虛擬路徑“/rwd-router”.服務器端接收到請求后決定使用原始圖片還是小尺寸的“響應式圖片”，并進行相應的反饋輸出.

4 結束語

隨著移動技術的普及，越來越多的人會通過不同的屏幕來瀏覽網(wǎng)頁，過去以桌面電腦為中心的設計思想，要逐漸轉變成為未知設備而設計的思想.響應式網(wǎng)頁設計就是一套可靠且面向未來的解決方案，它將提供良好的設計效果和最佳的使用體驗.

［1］Frain B.Responsive Web Design with HTML5 and CSS3［M］.Birmingham:Packt Publishing，2012:10-11.

［2］Jonathan Stark.Building iPhone Apps with HTML，CSS，and JavaScript［M］.USA:O＇Reilly Media，2010:16-17.

［3］許中博.“響應式”網(wǎng)頁布局設計淺析［J］.黑龍江科技信息，2012(26):106.

［4］Dan Cederholm(著)，劉建寧(譯).無懈可擊的Web 設計——利用XHTML 和CSS 提高網(wǎng)站的靈活性與適應性(第二版)［M］.北京:清華大學出版社.2009:195-238.

［5］Zoe Mickley Gillenwater.Flexible Web Design:Creating Liquid and Elastic Layouts with CSS［M］.USA:New Riders，2009:285-312.

［6］Scott Jehl.Responsive Images:Experimenting with Context-Aware Image Sizing EB/OL］.http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/.2010-12-14.