基于CSS3媒體查詢的響應(yīng)式布局研究

蔣昀昕

（福建衛(wèi)生職業(yè)技術(shù)學(xué)院健康管理系，福州 350101）

0 引言

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

1 響應(yīng)式布局

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

（1）面對不同分辨率設(shè)備靈活性強(qiáng)

（2）能夠快捷解決多設(shè)備顯示適應(yīng)問題

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

2 媒體查詢

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

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

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

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

設(shè)備名稱主要包括以下計中類型：

●All：用于所有設(shè)備類型

●Screen：應(yīng)用計算機(jī)顯示器

●Projection：用于投影顯示

●Handheld：用于小型或手持設(shè)備

●Print：用于打印預(yù)覽模式

●Braille：用于觸覺反饋設(shè)備

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

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

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

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

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

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

●Orientation：設(shè)備方向是水平還是垂直

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

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

3 視口標(biāo)簽

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

4 利用媒體查詢制作響應(yīng)式頁面

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

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

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

圖2 布局示意圖（智能手機(jī)）

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

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

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

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

5 結(jié)語

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