伊桑·馬科特在 2010 年次提出了響應式網頁設計 (RWD,Responsive Web Design) 的概念。 (當時能提出這個概念是很不簡單的哦) 他根據工程師在處理不同螢幕解析度的網頁內容展現的效果的時候常用的技巧和策略,創造性的進行了歸納總結。簡而言之是指網頁根據螢幕寬度,做出相應調整的,力求能夠達到在不同的裝置下,內容都能以合適的方式展現給多使用者。網站響應式設計的原理就是在 CSS 中,有一個不常用到的屬性 media 。為了達到響應式設計的目的,讓 css 根據螢幕寬度 (例如 media screen only(max-width:480px)),使用不同的 CSS 程式碼,從而達到自動調整頁面 DIV 寬度的目的。當然,除了 CSS,還可以使用 JS 對頁面內容進行動態的調整,不過這個技術不是很流行。那麼響應式網站主要分為哪些方面的設計呢?

  先是,圖片的響應式設計

  對於響應式網站的設計和開發過程中,圖片的設計一直是一個重點關注的物件。其中主要的就是圖片需要根據多使用者瀏覽終端的不同而隨之發生變化。並且不會出現顯示不全、展開有空白、圖片牧戶等情況。其次就是觸控式螢幕上使用手勢操作幾乎是多使用者的本能了。所以,在設計響應式圖片的時候,滑動操作等手勢操作賦予多使用者更多的權力,讓體驗更加逼真。

  其次是,網站整體框架的設計

  其實對於不瞭解響應式網站建設的站群站長來說,不建議使用框架的形式來搭建響應式網站,可能會造成樣式重複、內容類別之間發生衝突以及網頁負重過於高等情況。所以使用網站整體框架的設計來建設響應式網站需要切合自身的實際情況,定位自己的需求後再進行。

  再次是,多使用者體驗度的建設

  多使用者體驗度是一個網站是否可以生存下去的根本原因之一,其中響應式網站的多使用者體驗度就更加重要了。響應式網站建設中常見的錯誤就是在 pc 端瀏覽是一切正常,但是到手機端或平板上的時候就變得很奇怪,這對多使用者體驗度是很不好的。所以響應式網站建設時應該在多個不一樣的閱讀終端進行瀏覽、測試,反覆確認無誤後再上線。

  後就是,網站導航欄目的設定

  導航欄的顯示有時候在桌面端上導航的存在可能沒什麼,但是在移動端上檢視的時候,導航還是儘量隱藏起來,需要的時候再顯現。如左右切換的按鈕和標明瀏覽位置的圓點,知名是在遊標移動上去之後再顯示,這樣的設計不僅可以避免多使用者分心,而且能避免內容和導航元素之間的衝突,降低整體設計的混亂感。

  近些年隨著智慧手機手機的普及,站群站長們發現,從手機上來的流量一點不比在 PC 上來的少,所以,作為一種能夠自動適應不同螢幕尺寸的網頁設計辦法,響應式設計 (Responsive Design) 正日益成為受推崇的移動網頁最佳化方式。其實,響應式網站設計就是一種網路頁面設計佈局,是頁面的設計與開發應當根據多使用者行為以及裝置環境 (系統平臺、螢幕尺寸、螢幕定向等) 進行相應的響應和調整。並且在當下網際網路時代,隨著網民閱讀終端的普遍更換,響應式網站也越來越深受企業喜愛。總之,響應式網站設計,為計算機、手機、平板電腦等不同裝置的訪問多使用者了提供更加舒適的介面和更好的多使用者體驗 (和速度),而且隨著目前移動裝置的增長,已成為大勢所趨。