響應設計的特徵

聽過網頁設計，網頁靈感，沒有聽過相應網頁設計吧
響應網頁設計到底是什麼
雖然我們研究了響應網頁設計的三個特徵，但是好像真的沒什麼值得興奮的。事實上90%構成響應網頁設計的是良好的網頁設計的開頭。組織良好的HTML和靈活的佈局對於現代網頁設計來說是日常工作的一部分。 Marcotte提倡響應網頁設計所做的事就是向我們展示一種新的方法來實現我們不管如何都本應該做到的良好設計實踐。在現代環境下，提供靈活的佈局更加有必要，這樣我們可以更好的適應現存的多樣的瀏覽情況，我們要設計得更流暢和靈活。
響應網頁設計讓我們關注於花時間去做正確的事，不僅僅是我們如何寫代碼，而且是構思新想法和執行新的設計。
響應網頁設計目前在網頁設計中無疑從某種程度上來說，響應網頁設計概念的普及是非常應該的，因為用戶以越來越多樣化的方式訪問網站。 iPad，iPhone，Android移動設備，桌面，筆記本——現在我們的網頁設計必須在眾多方式下使用。
讓我們來了解響應網頁設計的含意和原則。
響應網頁設計的關鍵特徵 認為網頁設計是“響應”的，需要有三個關鍵牲。網頁設計師和開發者Ethan Marcotte——提出響應網頁設計的人——將這些特徵描述如下：
網站必須以靈活的網格為基礎構建。 設計中包含的圖片也必須是靈活的。 在不同的環境中必須可以通過媒體查詢擁有不同的視圖。

重要的是要注意所有這三個特徵都必須實現，以使真正的響應網頁設計生效。
任何缺少這些特徵的設計都不是一個響應網頁設計。它是不可改變的。
接下來，讓我們來深入研究這三個特徵，以更好的理解它們如何融合併給我們帶來完整地響應網頁設計。
靈活的網格
網格這個術語對於網頁設計來說變得很含糊。說你的網站必須由靈活的網格組成並不意味著你被限制於從幾十個現有的很棒的網格系統中選擇一個。
對於列，間距和容器定義自己的參數對於網頁設計來說往往是最好的方案，並且可以與任何現存的系統一樣靈活。
事實上，大多數存在的網格系統都限制於使用CSS類來定義大小，間距和排列。試著附加這些限製到一個響應網頁設計上可能會很棘手並且比寫自己的佈局更浪費時間。
不管你是使用預置的網格系統還是使用自定義的解決方案，靈活網格系統真正重要的地方是你的佈局大小和間距的機制。
對於網頁設計者，這意味著要放棄我們心愛的像素，並用百分比和em這樣的相對測量單位的網頁佈局代替它們。
當然，這不意味著我們不再在我們的圖像編輯軟件（即Photoshop，Fireworks等）中使用像素。取而代之的是，增加的一個需要簡單的數學計算的步驟成為網頁設計過程的一部分，因為我們要將我們的像素轉化為使用相對單位的網頁佈局。



St Paul's School網站使用了靈活的網格佈局，它可以根據瀏覽器的窗口大小改變佈局，佈局的改變以平滑的動畫來展示。
靈活的圖片
圖片隨著我們的靈活的網格移動和縮放是響應網頁設計的更一個關鍵特徵。靈活的圖片常常讓網頁設計者有些頭疼。加載一個區大的，超出大小的圖片，並在更小的瀏覽設備我們需要更多的空間來顯示內容時使用HTML的width和height屬性來縮小它不是一個加快網頁加載速度的很好實踐。
當然，這個問題有多大取決於圖片對你的網站帶來的壓力有多大。隨著網頁設計發展，我們看到網站越來越少的使用沒有必要的圖像和圖片庫。可能這是一個好機會去評估你的網頁設計是否需要像現在這樣多的圖片。
另一個縮放圖片的方法是使用CSS裁剪它們。 CSS的overflow屬性（比如說overflow:hidden）讓我們能夠動態地裁剪圖片，並使得周圍的空間能夠適合新的顯示環境。
我們也可以在服務器上有多個版本的圖片，並且根據用戶agent等服務器或客戶端特徵檢測技術動態地使用不同大小的版本。