CSS3在響應式網(wǎng)頁設計中的應用

陳梅　蘇晨++高斐

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

關鍵詞：移動設備；CSS3；響應式網(wǎng)頁

中圖分類號：TP37 文獻標識碼：A 文章編號：1009-3044（2016）19-0030-02

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

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

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

1 “響應式網(wǎng)頁設計”的提出

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

2 “響應式網(wǎng)頁設計”的實現(xiàn)

“響應式網(wǎng)頁設計”是通過什么方式來實現(xiàn)的呢，主要是通過以下三個方面。

首先，通過標簽的加入，可以用來實現(xiàn)響應式網(wǎng)頁。的意思是指網(wǎng)頁默認的寬度和高度。代碼如下：

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

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

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

3 響應式網(wǎng)頁設計的核心

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

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

href="Screen1.css" />

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

假如代碼的書寫如下：

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

href="Screen2.css" />

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

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

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

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

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

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

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

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

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

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

{.main{

float： none；

width：auto； }

#left {

display：none； }

}

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

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

參考文獻：

[1] 趙書田 劉海姣.響應式Web設計 [J].科技創(chuàng)新導報， 2015（24）：152

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

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

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