響應式網頁設計,是一種正在流行的網頁開發思想,它是利用靈活可變的柵格系統,令網頁的顯示模式可以根據訪問設備的屏幕尺寸規格而進行自適應。預計2015年的時候,移動端的用戶數量將會從目前的8億,增長到19億,而這也意味著目前我們為桌面瀏覽器而設計的網頁,將會在他們的手機和平板上呈現出非常糟糕的使用體驗。
但是隨著實際應用狀況的改變,響應式網頁設計還是會出現一系列復雜的并發癥。本文余下的部分,就是詳細闡述如何在響應式網頁中安置和處理多媒體元素,諸如圖片和視頻,最終的目的是幫你做出一個靠譜的網站,能讓這些元素無縫地在各種手持設備上加載運行,提升用戶體驗。
響應式網頁設計中的圖片處理
先說說響應式圖片的處理方法。在響應式網頁設計中,圖片處理的問題或多或少地和傳統網頁中的導航欄設計有相似之處。隨著新的移動設備的普及,更高像素密度的屏幕使得網頁的任何一個瑕疵都顯得無比明顯,因此,圖片處理的核心問題在于如何確保網站(尤其是圖片)的各個方面都能盡可能靈活,并且確保每個像素不會在高分屏下模糊。