響應(yīng)式Web設(shè)計技術(shù)實現(xiàn)方法研究

宋亭燕　　佟歐

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

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

引言

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

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

一、彈性布局

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

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

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

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

現(xiàn)在的重點是如何設(shè)置各主要模塊的百分比寬度。這種百分比的計算有一個簡易可行的方法：如要計算頭部（header）的百分比值可以用header元素寬度與wrapper元素寬度相比，取百分比即可。計算后將結(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%； }

二、彈性圖片

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

img{max-width： 100%；}

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

三、媒體查詢

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

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

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

四、結(jié)束語

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

參考文獻(xiàn)：

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

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