宋亭燕　　佟歐

【摘 要】隨著移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展，移動(dòng)終端設(shè)備（如智能手機(jī)、平板電腦）因其攜帶方便以及可隨時(shí)隨地接入互聯(lián)網(wǎng)的優(yōu)勢(shì)，而使其成為多數(shù)人訪問網(wǎng)絡(luò)的主要工具。但由于同一個(gè)網(wǎng)頁在不同尺寸大小的屏幕上的顯示效果是不同的，這就需要利用響應(yīng)式Web設(shè)計(jì)的實(shí)現(xiàn)方法使網(wǎng)頁做到自動(dòng)適應(yīng)屏幕的大小。本文從彈性布局、彈性圖片和媒體查詢?nèi)齻€(gè)方面闡述了響應(yīng)式Web設(shè)計(jì)的實(shí)現(xiàn)方法。

【關(guān)鍵詞】響應(yīng)式Web設(shè)計(jì)；移動(dòng)終端；布局

引言

隨著智能手機(jī)和平板電腦的普及，越來越多的人習(xí)慣了拿起手機(jī)就上網(wǎng)，因此，手機(jī)端網(wǎng)站建設(shè)的需求也逐漸增加。由于PC端和移動(dòng)端設(shè)備的視口差別很大，同一個(gè)網(wǎng)頁不可能在不同視口下都完美的顯示出來，而為每一種屏幕尺寸都設(shè)計(jì)制作一個(gè)對(duì)應(yīng)寬度的頁面也是不現(xiàn)實(shí)的。因此，探索出一種可適應(yīng)不同視口寬度的網(wǎng)頁開發(fā)方法才是需要我們解決的問題。

響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive Web Design）由Ethan Marcotte于2010年5月在他發(fā)表的一篇文章中提出。在這篇具有開創(chuàng)性意義的文章中他將三種已有的開發(fā)技巧（彈性布局、彈性圖片、媒體和媒體查詢）整合在一起，提出了響應(yīng)式網(wǎng)頁設(shè)計(jì)的概念。概括來說，響應(yīng)式網(wǎng)頁設(shè)計(jì)就是針對(duì)任意設(shè)備對(duì)網(wǎng)頁內(nèi)容進(jìn)行完美布局的一種顯示機(jī)制[1]。

一、彈性布局

由于要適應(yīng)不同分辨率的顯示要求，固定寬度的頁面設(shè)定顯然已不能完美的顯示頁面內(nèi)容。這時(shí)，彈性流體布局的應(yīng)用可以很好的解決這樣的問題。彈性布局不對(duì)頁面的寬度進(jìn)行固定值的設(shè)定，而是采取百分比（%）寬度進(jìn)行設(shè)定。

舉例說明這種百分比設(shè)定的方法，一個(gè)符合Web標(biāo)準(zhǔn)的頁面基本標(biāo)簽結(jié)構(gòu)應(yīng)該是這樣的：

設(shè)定整個(gè)頁面的寬度為100% ，要設(shè)置合理的最大寬度值和最小寬度值就要考慮到用戶端的顯示設(shè)備，大到桌面PC，小到移動(dòng)互聯(lián)設(shè)備（如ipad、手機(jī)等）。因此可以對(duì)#wrapper元素的樣式屬性設(shè)置如下：

#wrapper {margin：auto； width：100%； max-width：1280px； min-width：220px；}

現(xiàn)在的重點(diǎn)是如何設(shè)置各主要模塊的百分比寬度。這種百分比的計(jì)算有一個(gè)簡(jiǎn)易可行的方法：如要計(jì)算頭部（header）的百分比值可以用header元素寬度與wrapper元素寬度相比，取百分比即可。計(jì)算后將結(jié)果設(shè)置到CSS樣式表中：

#header {margin-right：10px； margin-left：10px； width：97%；}

#sidebar {margin-top：60px； width：35%； }

#content {margin-top：60px； width：65%； }

#footer {float：left； margin-top：30px； width：97%； }

二、彈性圖片

在一個(gè)網(wǎng)站中圖片的顯示效果是很重要的一部分。如果使用圖像的原始寬度顯示，當(dāng)包含圖像的元素模塊小于圖像寬度時(shí)，圖像的一部分會(huì)被遮擋或無法顯示出來。對(duì)于解決這個(gè)問題就要用到彈性圖片的概念，這需要在CSS中作以下聲明：

img{max-width： 100%；}

上面這行代碼可以確保圖像寬度不會(huì)超出屏幕或視口寬度，當(dāng)屏幕尺寸不斷變化時(shí)，圖像也隨之變化并始終適應(yīng)屏幕大小，而且不會(huì)被遮擋或覆蓋。不過，彈性圖片也有其缺點(diǎn)，通常在使用時(shí)需要準(zhǔn)備一張足夠大的圖片來適應(yīng)更大的分辨率顯示，但是對(duì)于小視口每次都需要下載超大圖片來說就顯得有點(diǎn)負(fù)擔(dān)沉重了。

三、媒體查詢

媒體查詢（Media Query）是響應(yīng)式設(shè)計(jì)的核心。它可以讓開發(fā)者根據(jù)在特定環(huán)境下查詢到的各種屬性（如分辨率、色彩深度、高度和寬度）來決定應(yīng)用什么樣的樣式表。通過媒體查詢，可以實(shí)現(xiàn)調(diào)整布局、美化之前彈性布局之后的頁面[2]。

CSS3是實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的關(guān)鍵技術(shù)，它是由多個(gè)附加模塊組合而成的。媒體查詢就是其中一個(gè)模塊，其具體方法就是在鏈接樣式表的媒介屬性中添加如下一個(gè)查詢語句：

從這條查詢語句來看，首先詢問了媒體類型（是否是顯示屏）和媒體特性（顯示屏是否是縱向的），接著詢問視口寬度是否小于720像素，如果視口寬度小于720像素就加載720wide-portrait-screen.css文件，否則樣式表將被忽略。

四、結(jié)束語

由于響應(yīng)式Web設(shè)計(jì)可以適應(yīng)幾乎所有視口尺寸的設(shè)備，因此它可以給用戶帶來前所未有的操作體驗(yàn)。本文通過討論響應(yīng)式Web設(shè)計(jì)的三個(gè)關(guān)鍵技術(shù)基本闡明了針對(duì)移動(dòng)端頁面的開發(fā)方法。雖然響應(yīng)式Web設(shè)計(jì)在技術(shù)上還有一些不足，但隨著Web技術(shù)的不斷進(jìn)步和廣大網(wǎng)頁設(shè)計(jì)人員的努力，相信響應(yīng)式Web設(shè)計(jì)在未來一定會(huì)給用戶帶來更好用戶體驗(yàn)和更高的滿意度。

參考文獻(xiàn)：

[1] Ben Frain 著，王永強(qiáng) 譯. 響應(yīng)式Web設(shè)計(jì) HTML5和CSS3實(shí)戰(zhàn)[M]. 人民郵電出版社，2013，01.

[2] 張幸芝，徐東東，賈菲. 基于響應(yīng)式Web設(shè)計(jì)的教務(wù)系統(tǒng)移動(dòng)平臺(tái)研究與建設(shè)[J]. 軟件，2013年第34卷 第6期.