陳梅　蘇晨++高斐

摘要：隨著社會(huì)和網(wǎng)絡(luò)技術(shù)的發(fā)展，移動(dòng)設(shè)備正被人們?cè)絹?lái)越廣泛的應(yīng)用，并且成為訪問(wèn)互聯(lián)網(wǎng)的最常見(jiàn)終端。而各種不同的設(shè)備，其顯示屏幕是不同的。響應(yīng)式網(wǎng)頁(yè)正是為了在大小的不同屏幕上顯示同樣的網(wǎng)頁(yè)而誕生的。文章對(duì)CSS3在制作響應(yīng)式網(wǎng)頁(yè)的代碼實(shí)現(xiàn)等方面，進(jìn)行了論述說(shuō)明。

關(guān)鍵詞：移動(dòng)設(shè)備；CSS3；響應(yīng)式網(wǎng)頁(yè)

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）19-0030-02

隨著互聯(lián)網(wǎng)的發(fā)展及廣泛應(yīng)用，移動(dòng)設(shè)備的應(yīng)用也日益廣泛，比如使用手機(jī)上網(wǎng)，使用IPAD訪問(wèn)網(wǎng)絡(luò)等等，成為訪問(wèn)互聯(lián)網(wǎng)最常見(jiàn)的方式。既然訪問(wèn)網(wǎng)絡(luò)的終端設(shè)備不一樣，導(dǎo)致了顯示的屏幕大小不盡相同，那如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)呢？比如，手機(jī)的屏幕比較小，而電腦顯示器的屏幕卻比手機(jī)屏幕大很多倍。同樣的內(nèi)容，要在不同大小的屏幕上，都能正確顯示和表達(dá)出來(lái)，那就需要借助于相應(yīng)的方式和方法才能實(shí)現(xiàn)。

其實(shí)在很早以前，曾經(jīng)就有人設(shè)想，設(shè)計(jì)者能不能對(duì)網(wǎng)頁(yè)進(jìn)行一次性設(shè)計(jì)之后，但是能對(duì)不同大小屏幕的設(shè)備，都能適用，這樣，網(wǎng)頁(yè)就能根據(jù)所用的屏幕寬度，進(jìn)行自動(dòng)調(diào)整，從而實(shí)現(xiàn)正確顯示網(wǎng)頁(yè)的功能。

之前，在沒(méi)有CSS3的情況下，大多數(shù)都是把一個(gè)項(xiàng)目做很多個(gè)不同的版本，用JS或者其他設(shè)備進(jìn)行判斷，然后再跳轉(zhuǎn)到指定的版本中去。但是現(xiàn)在隨著CSS3技術(shù)的普及，在WEB設(shè)計(jì)中，可以使用CSS技術(shù)實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，根據(jù)媒體設(shè)備的屏幕尺寸讓網(wǎng)站的內(nèi)容自動(dòng)響應(yīng)。

1 “響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”的提出

早在2010年，Ethan Marcotte就提出了“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”這個(gè)名詞，它的含義是指網(wǎng)頁(yè)可以通過(guò)自動(dòng)識(shí)別屏幕大小，來(lái)做出相應(yīng)的調(diào)整，使網(wǎng)頁(yè)能適應(yīng)屏幕大小達(dá)到正常顯示的新網(wǎng)頁(yè)設(shè)計(jì)方式及技術(shù)。這就是響應(yīng)式網(wǎng)頁(yè)的來(lái)源。

2 “響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”的實(shí)現(xiàn)

“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”是通過(guò)什么方式來(lái)實(shí)現(xiàn)的呢，主要是通過(guò)以下三個(gè)方面。

首先，通過(guò)標(biāo)簽的加入，可以用來(lái)實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)。的意思是指網(wǎng)頁(yè)默認(rèn)的寬度和高度。代碼如下：

這行代碼的意思是，網(wǎng)頁(yè)寬度與所用設(shè)備的屏幕寬度是相等的，網(wǎng)頁(yè)的大小占所用設(shè)備屏幕大小的一倍。

其次，由于網(wǎng)頁(yè)要根據(jù)屏幕大小來(lái)調(diào)整頁(yè)面的布局，所以在書(shū)寫(xiě)CSS3代碼的過(guò)程中，不能使用絕對(duì)寬度，其中也包括不能具有絕對(duì)寬度的元素。比如，CSS3代碼不能寫(xiě)成這種代碼：width：780 px；這樣書(shū)寫(xiě)代碼就相當(dāng)于指定了所用元素的寬度，這樣，在不同屏幕進(jìn)行顯示的時(shí)候就會(huì)出錯(cuò)。可以寫(xiě)成這種代碼：width： 100%；或者width：auto；這樣書(shū)寫(xiě)代碼的含義是指定所用元素的寬度跟屏幕大小相同，或者隨著屏幕大小自動(dòng)調(diào)節(jié)。這樣，在網(wǎng)頁(yè)進(jìn)行顯示時(shí)才能跟所用設(shè)備的屏幕相匹配。另外，對(duì)于頁(yè)面中的字體來(lái)說(shuō)，在書(shū)寫(xiě)代碼時(shí)，也不能定義字體的大小（px），而只能定義字體的相對(duì)大?。╡m）。比如，代碼body {font： Arial 100% ；}，說(shuō)明的含義是字體大小跟頁(yè)面默認(rèn)字體的大小是一樣的。代碼h1 {font-size： 1.5em；}的意思是h1字體的大小是默認(rèn)字體的1.5倍。這兩種定義字體大小的方式是正確的。假如寫(xiě)成body {font： Arial 16px ；}或者h(yuǎn)1 {font-size： 30px；}，則是錯(cuò)誤的。

第三，對(duì)于響應(yīng)式網(wǎng)頁(yè)來(lái)說(shuō)，需要設(shè)置的布局是不能固定不變。也就是說(shuō)，在網(wǎng)頁(yè)中的每個(gè)區(qū)塊，其位置都應(yīng)該是浮動(dòng)的，而不是固定不變的。比如，代碼.right {float： left；width： 80%；}的含義是把.right區(qū)塊設(shè)置為左浮動(dòng)，寬度是頁(yè)面的80%。使用浮動(dòng)的優(yōu)點(diǎn)是，如果屏幕的寬度不夠，放不下水平方向的兩個(gè)或多個(gè)元素，那第二個(gè)元素或其他元素會(huì)自動(dòng)轉(zhuǎn)到第二行或者第三行，而不會(huì)在水平方向進(jìn)行排列，通過(guò)這種書(shū)寫(xiě)代碼的方式，就不會(huì)在頁(yè)面上出現(xiàn)水平滾動(dòng)條了。

3 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的核心

對(duì)于響應(yīng)式網(wǎng)頁(yè)的實(shí)現(xiàn)來(lái)說(shuō)，其核心就是通過(guò)CSS3引入Media Query模塊。而使用Media Query模塊的含義就是通過(guò)書(shū)寫(xiě)的CSS3代碼來(lái)獲取所用設(shè)備的屏幕大小，并根據(jù)屏幕大小來(lái)調(diào)用相應(yīng)的CSS文件，以此來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)在該設(shè)備屏幕的正常顯示。比如下面的代碼：

media="screen and （max-device-width： 200px）"

href="Screen1.css" />

它的代碼含義是，如果屏幕寬度小于200像素，網(wǎng)頁(yè)就會(huì)調(diào)用Screen1.css文件，使網(wǎng)頁(yè)按照Screen1.css中定義的格式來(lái)顯示網(wǎng)頁(yè)內(nèi)容。

假如代碼的書(shū)寫(xiě)如下：

media="screen and （min-width： 200px） and （max-device-width：400px）"

href="Screen2.css" />

它的含義是如果屏幕寬度在200像素到400像素之間，那么網(wǎng)頁(yè)就會(huì)調(diào)用Screen2.css文件，按照Screen2.css文件中定義的格式來(lái)顯示網(wǎng)頁(yè)內(nèi)容。

另外，Media Query可以多個(gè)使用。也就是說(shuō)，一個(gè)Media Query可以包含多個(gè)表達(dá)式，也可以沒(méi)有表達(dá)式，如果有表達(dá)式，那么表達(dá)式可以包含多個(gè)關(guān)鍵字，也可以沒(méi)有關(guān)鍵字。比如下面的代碼就是這樣，使用了多個(gè)表格式，并且當(dāng)屏幕大小符合設(shè)定的條件時(shí)，就調(diào)用樣式表screen.css的代碼來(lái)顯示網(wǎng)頁(yè)內(nèi)容。

上面的代碼是通過(guò)使用html標(biāo)簽調(diào)用CSS文件，除此以外，還可以使用現(xiàn)有的CSS文件來(lái)實(shí)現(xiàn)。

由此看見(jiàn)，使用Media Query模塊的目的，是在于為不同的視圖寬度來(lái)指定不同的CSS規(guī)則，實(shí)現(xiàn)不同的布局。而且Media Query的功能是非常強(qiáng)大的，在我們使用不同的設(shè)備瀏覽網(wǎng)頁(yè)時(shí)，能使我們制作的頁(yè)面在設(shè)備屏幕大小不同的情況下都能顯示正常，這對(duì)于我們用戶來(lái)說(shuō)，就足夠了。Media Query還有一個(gè)特點(diǎn)，那就是 Media Query可以寫(xiě)在同一個(gè)或者單獨(dú)的樣式表中。

4 圖片的自適應(yīng)調(diào)節(jié)

由于手機(jī)終端的帶寬沒(méi)有那么大，所以，如果我們只是對(duì)頁(yè)面布局做了響應(yīng)式處理，但是在用手機(jī)訪問(wèn)網(wǎng)頁(yè)時(shí)，請(qǐng)求的圖片還是PC上的大圖，那么文件的體積就顯得太大，這樣消耗流量也多，請(qǐng)求延時(shí)變長(zhǎng)，因此而導(dǎo)致的問(wèn)題也是不可估量的。所以對(duì)于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，除了對(duì)布局和文本有要求之外，還必須要考慮到圖片的正確顯示。而要實(shí)現(xiàn)圖片的正確顯示，只需要對(duì)圖片進(jìn)行一下設(shè)置就可以了，比如代碼可以設(shè)置為：img { width： 100%；}

如果可能的話，還是要根據(jù)屏幕的大小，來(lái)加載不同分辨率的圖片。瀏覽器通過(guò)獲取用戶終端的屏幕尺寸及分辨率，進(jìn)行邏輯處理后，輸出相應(yīng)大小的圖片，比如，如果屏幕的分辨率是320*480，那么匹配給它的應(yīng)該是寬度小于320像素的圖片。

5 關(guān)于CSS3的@media規(guī)則

在一個(gè)CSS3文件中，也可以根據(jù)屏幕大小的不同，編寫(xiě)CSS3代碼來(lái)實(shí)現(xiàn)頁(yè)面的正確顯示。比如有如下代碼：

@media screen and （max-device-width： 380px）

{.main{

float： none；

width：auto； }

#left {

display：none； }

}

以上代碼的含義是，當(dāng)所用設(shè)備的屏幕寬度小于380像素時(shí)，則.main模塊不進(jìn)行浮動(dòng)，但是寬度可以進(jìn)行自動(dòng)調(diào)節(jié)，left模塊不顯示。

總之，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的理念是，根據(jù)屏幕的大小、用戶的行為和用戶所用的環(huán)境基礎(chǔ)上，進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)的自適應(yīng)性調(diào)整，包括在布局、圖像等方面能夠與CSS3相結(jié)合，以便能實(shí)現(xiàn)網(wǎng)頁(yè)在不同設(shè)備的正確顯示。這樣，網(wǎng)站如果能根據(jù)用戶的使用環(huán)境來(lái)進(jìn)行自動(dòng)調(diào)整頁(yè)面，就可以減少不必要的重復(fù)設(shè)計(jì)。同時(shí)，我們要清楚，media queries只是一個(gè)通過(guò)CSS代碼來(lái)實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)的一種方式，但該方法并不是唯一的一種方法。假如通過(guò)使用JavaScript代碼，或者使用JavaScript配合media queries，我們還可以實(shí)現(xiàn)更多的變化。

參考文獻(xiàn)：

[1] 趙書(shū)田 劉海姣.響應(yīng)式Web設(shè)計(jì) [J].科技創(chuàng)新導(dǎo)報(bào)， 2015（24）：152

[2] 李伙欽.基于CSS3電子實(shí)驗(yàn)網(wǎng)頁(yè)的設(shè)計(jì)與實(shí)現(xiàn)[J].科技世界，2016（2）.

[3] 密海英.面向不同設(shè)備的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)探析[J].蘇州市職業(yè)大學(xué)學(xué)報(bào)，2013（2）.

[4] 許中博.“響應(yīng)式”網(wǎng)頁(yè)布局設(shè)計(jì)淺析[J].黑龍江科技信息，2012（26）.