響應(yīng)式Web 設(shè)計(jì)方法的研究

邢 希，田興彥，王世運(yùn)

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

0 引言

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

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

圖1 響應(yīng)式網(wǎng)頁設(shè)計(jì)概念圖

1 CSS3 中的媒體查詢模塊

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

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

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

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

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

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

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

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

2 流式布局

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

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

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

3 自適應(yīng)的文字和圖片

響應(yīng)式頁面設(shè)計(jì)中除了頁面結(jié)構(gòu)可以自適應(yīng)縮放之外，文字和圖片也要能相應(yīng)地實(shí)現(xiàn)大小隨窗口尺寸自適應(yīng)變化.

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

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

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

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

4 結(jié)束語

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

［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］許中博.“響應(yīng)式”網(wǎng)頁布局設(shè)計(jì)淺析［J］.黑龍江科技信息，2012(26):106.

［4］Dan Cederholm(著)，劉建寧(譯).無懈可擊的Web 設(shè)計(jì)——利用XHTML 和CSS 提高網(wǎng)站的靈活性與適應(yīng)性(第二版)［M］.北京:清華大學(xué)出版社.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.