基于CSS3媒體查詢的響應式布局研究

蔣昀昕

（福建衛生職業技術學院健康管理系，福州 350101）

0 引言

目前，移動設備發展迅速，瀏覽者已經不局限于通過臺式機上網瀏覽網頁。平板電腦和智能手機是發展較快的移動終端，越來越多的瀏覽者通過這些終端設備訪問站點。面對不斷擴展的瀏覽器和移動設備，開發者的解決方案是基于HTML5和CSS3的響應式Web設計。

1 響應式布局

響應式布局也可稱為響應式Web設計（Respon?sive Web Design），它是Ethan Marcotte在2010年發明的。其核心思想是網頁結構會隨著訪問它的視口及設備的不同而呈現不同的布局——即一個網站能夠兼容多個終端，而不是為每個終端做一個特點的版本。Ethan Marcotte提出三種技術（彈性網格布局、彈性圖片/媒體、媒體查詢）實現響應式Web設計。響應式布局的優點在于：

（1）面對不同分辨率設備靈活性強

（2）能夠快捷解決多設備顯示適應問題

當然，響應式布局也存在一定的缺點。例如：代碼累贅，加載時間增長；不能確保所有瀏覽器都支持等。因此，設計者在使用響應式布局之前先確定其必要性。如果所開發的網頁是針對桌面端人群，暫時可不要適應響應式布局；如果針對的是移動端人群，則有必要使用響應式布局[1]。

2 媒體查詢

CSS3中新增了Media Queries模塊，該模塊允許添加媒體查詢表達式用于指定媒體類型，根據不同的媒體類型選擇相應的表達式。W3C給媒體查詢的定義為：“媒體查詢包含媒體類型和零個或多個檢測媒體特性的表達式。Width、Height和Color都是可用于媒體查詢的特性。使用媒體查詢，可以不必修改內容本身，而讓網頁適配不同的設備”。

如果沒有媒體查詢，只用CSS是無法按要求修改網頁外觀的。彈性布局雖然可以讓設計適應較多場景，也包括某些尺寸的屏幕，但有時候確實不夠用。因為我們還需要對布局進行更細致的調整[2]。

CSS3媒體查詢的具體語法如下：

@media設備名稱only（選取條件）not（選取條件）and（選取條件），設備二{SRules}

設備名稱主要包括以下計中類型：

●All：用于所有設備類型

●Screen：應用計算機顯示器

●Projection：用于投影顯示

●Handheld：用于小型或手持設備

●Print：用于打印預覽模式

●Braille：用于觸覺反饋設備

Media屬性描述了將被包含的鏈接內容所針對的媒體類型。如果沒有申明，默認是all。

CSS3新的@media查詢是media屬性可以接受的值。在該屬性的值中可以接受的關鍵詞如下所示：

●(min/max)-width：視口寬度

●(min/max)-height：視口高度

●(min/max)-device-height：設備屏幕的高度

●(min/max)-device-width：設備屏幕的寬度

●Orientation：設備方向是水平還是垂直

●（min/max）-aspect-ration：視口的寬高比

上述代碼的含義是當屏幕設備的寬度在500像素及以下時，所有段落元素字體變成紅色。在實際編寫規則時，多數情況下Screen and可以省略不寫。

3 視口標簽

在桌面環境上，視口的大小就是瀏覽器窗口大小。在大多數移動設備上，頁面縮放是可以控制的，但視口大小保持不變，由設備屏幕的尺寸所決定[3]。為了適應屏幕，多數的移動瀏覽器會把HTML網頁縮放到設備屏幕的寬度。通過使用meta標簽的viewport屬性來設置移動設備瀏覽器窗口的邏輯尺寸及縮放。具體做法是：在當前頁面的head區域內輸入代碼""在該行代碼中，name="viewport"表示針對視口設置，width屬性被用來控制layout viewport（布局視口）的寬度，layout viewport（布局視口）寬度默認值是設備廠家指定的。iOS、Android基本都將這個視口分辨率設置為980px。我們可以將width屬性設為確切的像素數，也可以設為"width=device-width"這一特殊值。這樣設置的目的是為了實現自適應布局。initialscale用于指定頁面的初始縮放比例，initial-scale=1表示將layout viewport（布局視口）的寬度設置為ideal viewport（理想視口）的寬度視口。標記在所有的智能手機和移動設備上都支持。

4 利用媒體查詢制作響應式頁面

在使用響應式布局設計頁面時，利用媒體查詢創建不同的布局來適應不同的終端設備。不同的設備寬度對應著不同的布局寬度。改變布局的寬度稱為斷點。在確定你需要斷點時，可以使用媒體查詢把一定范圍的視口尺寸作為特定布局的目標。下面以制作適合多種設備終端顯示的響應式頁面為例，詳細說明媒體查詢在響應式頁面布局中的應用。

在該案例中的設備終端主要針對平板電腦顯示和手機屏幕顯示。目前，平板電腦的分辨率是1024×768以上，智能手機分辨率為480×780。因此，本案例中將響應式頁面的寬度做兩個方面的劃分，第一個是當顯示分辨率大于600像素時，頁面適合在平板電腦中瀏覽；第二個是當分辨率小于600像素是，頁面適合在智能手機中瀏覽。將600像素做為本案例中的斷點。確定了斷點以后，接下來為本案例確定一個基本頁面布局，當基本頁面確定完成后，再根據斷點編寫對應的CSS的規則。本案例中，將平板電腦顯示的頁面布局做為基本布局，布局示意圖如圖1所示。在該布局基礎上，利用媒體查詢編寫相應的CSS規則，即可得到智能手機布局，如圖2所示。

圖1 布局示意圖（平板電腦）

圖2 布局示意圖（智能手機）

對比兩種布局示意圖，不難發現他們的網頁結構是相同的——即上、中、下結構。其中，頂部和底部的布局結構是完全不變，布局中唯一變動的地方在中間層Content。在平板電腦預覽下Content層中的3個子層item是并列結構，在智能手機預覽下3個層是垂直結構。并列結構的實現可以將3個子層設置為浮動層，垂直結構則直接將浮動去除即可。這里需要注意的是，當頁面使用響應式布局實現時，各個容器的寬度必須要用相對值而不能用固定值。在本案例中，中間層Content的寬度設置為96%（相對于瀏覽器寬度）。布局的具體步驟如下：

（2）按照圖2布局示意圖制作平板電腦環境下的網頁，其中將中間層Content的3個子層item定義為浮動層，具體CSS規則定義如下：

（3）使用媒體查詢編寫寬度小于600像素的CSS規則

以上代碼的含義是：在智能手機預覽下，清除item容器的浮動屬性，將容器的寬度設置為自適應，同時縮小頭部header容器內的段落文字大小。

5 結語

本文介紹了響應式網站布局的基本思想，以及如何利用媒體查詢對響應式網站進行布局。通過不同的媒體類型和條件定義樣式表規則，媒體查詢讓CSS可以更精確作用于不同媒體類型和同一媒體的不同條件。通過CSS3的Media Queries屬性，開發者可以在不同的設備下實現豐富的頁面。