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