如果客戶問(wèn)：什么是響應(yīng)式網(wǎng)站？建站公司的銷(xiāo)售人員必定會(huì)這樣回答——可以適應(yīng)不同屏幕的網(wǎng)站，在手機(jī)、PC、平板上都能打開(kāi)。
如果一個(gè)稍微專(zhuān)業(yè)的人士問(wèn)：響應(yīng)式網(wǎng)站中有哪些元素呢？未必能夠回答上來(lái)。
響應(yīng)式網(wǎng)站的特性
響應(yīng)式網(wǎng)站是由一位研發(fā)人員Ethan Marcotte提出的，他認(rèn)為響應(yīng)式網(wǎng)站應(yīng)該具備三個(gè)特性：
一是具備靈活的網(wǎng)頁(yè)布局；
二是具備靈活的圖片適應(yīng)；
三是具備靈活的媒體查詢(xún)，或者說(shuō)媒體條件。
下面，我們分別對(duì)這三個(gè)特性進(jìn)行解讀。
靈活的網(wǎng)頁(yè)布局
網(wǎng)格這個(gè)術(shù)語(yǔ)在web設(shè)計(jì)中越來(lái)越模糊。說(shuō)您的站點(diǎn)必須由一個(gè)靈活的網(wǎng)格組成，并不意味著您只能從十幾個(gè)左右的大型網(wǎng)格系統(tǒng)中進(jìn)行選擇。為列、間距和網(wǎng)頁(yè)定義自己的參數(shù)通常是web設(shè)計(jì)的最佳解決方案，并且可以像現(xiàn)有的任何系統(tǒng)一樣靈活。
事實(shí)上，大多數(shù)現(xiàn)有的網(wǎng)格系統(tǒng)都限制使用CSS類(lèi)來(lái)定義大小、空間和對(duì)齊方式。與編寫(xiě)自己的網(wǎng)格相比，嘗試將這些限制疊加到響應(yīng)性web設(shè)計(jì)上可能比較棘手，也更耗時(shí)。無(wú)論是在使用預(yù)先制作的網(wǎng)格系統(tǒng)還是創(chuàng)建自定義解決方案，靈活網(wǎng)格系統(tǒng)真正重要的方面在于布局大小和間距的機(jī)制。
對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，這意味著放棄我們喜愛(ài)的像素，代之以使用百分比和em(相對(duì)度量單位)的網(wǎng)頁(yè)布局。
當(dāng)然，這并不意味著我們停止使用圖像編輯軟件中的像素(比如Photoshop、Fireworks等)。 靈活的網(wǎng)格，可根據(jù)瀏覽器視圖的大小更改布局。布局的變化可以通過(guò)流暢的動(dòng)畫(huà)表現(xiàn)出來(lái)。
靈活的圖像
使用靈活的網(wǎng)格移動(dòng)和縮放圖像是響應(yīng)式web設(shè)計(jì)的另一個(gè)關(guān)鍵特性。靈活的圖像常常讓web設(shè)計(jì)人員感到頭痛。當(dāng)我們想在更小的瀏覽設(shè)備上為文本內(nèi)容提供更多的空間時(shí)，使用寬度和高度HTML屬性來(lái)縮小圖片的大小，加載巨大的、超大的圖片，對(duì)于更快的web頁(yè)面加載時(shí)間來(lái)說(shuō)不是一個(gè)好的實(shí)踐。
當(dāng)然，這一問(wèn)題的嚴(yán)重程度也取決于站點(diǎn)的圖像質(zhì)量。隨著web設(shè)計(jì)的發(fā)展，我們不斷地看到包含越來(lái)越少不必要的圖片和庫(kù)存照片的站點(diǎn)。也許這是一個(gè)很好的時(shí)間來(lái)評(píng)估您的web設(shè)計(jì)是否需要像現(xiàn)在這樣注重圖像。
另一種縮放圖像的方法是用CSS裁剪它們。CSS overflow屬性使我們能夠?yàn)檫m應(yīng)新的顯示環(huán)境而動(dòng)態(tài)裁剪圖像。
我們還可以在服務(wù)器上有多個(gè)版本的圖像，然后根據(jù)用戶代理使用服務(wù)器端或客戶端特性檢測(cè)和DOM操作動(dòng)態(tài)地提供適當(dāng)大小的版本。
媒體查詢(xún)
媒體查詢(xún)也被稱(chēng)之為媒體條件，指的是代碼可以根據(jù)屏幕大小來(lái)改變呈現(xiàn)的方式。
通常，人們認(rèn)為它們是響應(yīng)性設(shè)計(jì)的核心組件，而讓靈活的頁(yè)面組件成為可選的。實(shí)際情況是，如果沒(méi)有一個(gè)優(yōu)良的HTML和CSS基礎(chǔ)，媒體查詢(xún)幾乎毫無(wú)用處。
媒體查詢(xún)?cè)试S設(shè)計(jì)人員使用相同的HTML文檔構(gòu)建多個(gè)布局，方法是根據(jù)用戶特性(比如瀏覽器窗口的大小)選擇性地提供樣式表。其他參數(shù)包括方向(橫向或縱向)、屏幕分辨率、顏色(即屏幕可以呈現(xiàn)多少顏色)，等等。
媒體查詢(xún)并不是一種移動(dòng)解決方案或平板電腦解決方案。相反，媒體查詢(xún)和響應(yīng)式設(shè)計(jì)讓我們能夠跳出屏幕大小或分辨率的限制，開(kāi)始構(gòu)建能夠靈活適應(yīng)所有不同屏幕的網(wǎng)站。
如果一個(gè)稍微專(zhuān)業(yè)的人士問(wèn)：響應(yīng)式網(wǎng)站中有哪些元素呢？未必能夠回答上來(lái)。
響應(yīng)式網(wǎng)站的特性
響應(yīng)式網(wǎng)站是由一位研發(fā)人員Ethan Marcotte提出的，他認(rèn)為響應(yīng)式網(wǎng)站應(yīng)該具備三個(gè)特性：
一是具備靈活的網(wǎng)頁(yè)布局；
二是具備靈活的圖片適應(yīng)；
三是具備靈活的媒體查詢(xún)，或者說(shuō)媒體條件。
下面，我們分別對(duì)這三個(gè)特性進(jìn)行解讀。
靈活的網(wǎng)頁(yè)布局
網(wǎng)格這個(gè)術(shù)語(yǔ)在web設(shè)計(jì)中越來(lái)越模糊。說(shuō)您的站點(diǎn)必須由一個(gè)靈活的網(wǎng)格組成，并不意味著您只能從十幾個(gè)左右的大型網(wǎng)格系統(tǒng)中進(jìn)行選擇。為列、間距和網(wǎng)頁(yè)定義自己的參數(shù)通常是web設(shè)計(jì)的最佳解決方案，并且可以像現(xiàn)有的任何系統(tǒng)一樣靈活。
事實(shí)上，大多數(shù)現(xiàn)有的網(wǎng)格系統(tǒng)都限制使用CSS類(lèi)來(lái)定義大小、空間和對(duì)齊方式。與編寫(xiě)自己的網(wǎng)格相比，嘗試將這些限制疊加到響應(yīng)性web設(shè)計(jì)上可能比較棘手，也更耗時(shí)。無(wú)論是在使用預(yù)先制作的網(wǎng)格系統(tǒng)還是創(chuàng)建自定義解決方案，靈活網(wǎng)格系統(tǒng)真正重要的方面在于布局大小和間距的機(jī)制。
對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，這意味著放棄我們喜愛(ài)的像素，代之以使用百分比和em(相對(duì)度量單位)的網(wǎng)頁(yè)布局。
當(dāng)然，這并不意味著我們停止使用圖像編輯軟件中的像素(比如Photoshop、Fireworks等)。 靈活的網(wǎng)格，可根據(jù)瀏覽器視圖的大小更改布局。布局的變化可以通過(guò)流暢的動(dòng)畫(huà)表現(xiàn)出來(lái)。
靈活的圖像
使用靈活的網(wǎng)格移動(dòng)和縮放圖像是響應(yīng)式web設(shè)計(jì)的另一個(gè)關(guān)鍵特性。靈活的圖像常常讓web設(shè)計(jì)人員感到頭痛。當(dāng)我們想在更小的瀏覽設(shè)備上為文本內(nèi)容提供更多的空間時(shí)，使用寬度和高度HTML屬性來(lái)縮小圖片的大小，加載巨大的、超大的圖片，對(duì)于更快的web頁(yè)面加載時(shí)間來(lái)說(shuō)不是一個(gè)好的實(shí)踐。
當(dāng)然，這一問(wèn)題的嚴(yán)重程度也取決于站點(diǎn)的圖像質(zhì)量。隨著web設(shè)計(jì)的發(fā)展，我們不斷地看到包含越來(lái)越少不必要的圖片和庫(kù)存照片的站點(diǎn)。也許這是一個(gè)很好的時(shí)間來(lái)評(píng)估您的web設(shè)計(jì)是否需要像現(xiàn)在這樣注重圖像。
另一種縮放圖像的方法是用CSS裁剪它們。CSS overflow屬性使我們能夠?yàn)檫m應(yīng)新的顯示環(huán)境而動(dòng)態(tài)裁剪圖像。
我們還可以在服務(wù)器上有多個(gè)版本的圖像，然后根據(jù)用戶代理使用服務(wù)器端或客戶端特性檢測(cè)和DOM操作動(dòng)態(tài)地提供適當(dāng)大小的版本。
媒體查詢(xún)
媒體查詢(xún)也被稱(chēng)之為媒體條件，指的是代碼可以根據(jù)屏幕大小來(lái)改變呈現(xiàn)的方式。
通常，人們認(rèn)為它們是響應(yīng)性設(shè)計(jì)的核心組件，而讓靈活的頁(yè)面組件成為可選的。實(shí)際情況是，如果沒(méi)有一個(gè)優(yōu)良的HTML和CSS基礎(chǔ)，媒體查詢(xún)幾乎毫無(wú)用處。
媒體查詢(xún)?cè)试S設(shè)計(jì)人員使用相同的HTML文檔構(gòu)建多個(gè)布局，方法是根據(jù)用戶特性(比如瀏覽器窗口的大小)選擇性地提供樣式表。其他參數(shù)包括方向(橫向或縱向)、屏幕分辨率、顏色(即屏幕可以呈現(xiàn)多少顏色)，等等。
媒體查詢(xún)并不是一種移動(dòng)解決方案或平板電腦解決方案。相反，媒體查詢(xún)和響應(yīng)式設(shè)計(jì)讓我們能夠跳出屏幕大小或分辨率的限制，開(kāi)始構(gòu)建能夠靈活適應(yīng)所有不同屏幕的網(wǎng)站。
