成都網站建設,原新盒子網絡工作室
專業設計,打造專業品質
Professional design, to create professional quality
理解響應網頁設計元素
來源: 作者:成都網站制作 日期:2011-04-03 11:14:53 點擊:0

 

\


響應網頁設計目前在網頁設計中無疑是一個熱門話題。從某種程度上來說,響應網頁設計概念的普及是非常應該的,因為用戶以越來越多樣化的方式訪問網站。iPad,iPhone,Android移動設備,桌面,筆記本——現在我們的網頁設計必須在眾多方式下使用。

讓我們來了解響應網頁設計的含意和塬則。

響應網頁設計的關鍵特征

認為網頁設計是“響應”的,需要有叁個關鍵牲。網頁設計師和開發者Ethan Marcotte——提出響應網頁設計的人——將這些特征描述如下:

1.網站必須以靈活的網格為基礎構建。

2.設計中包含的圖片也必須是靈活的。

3.在不同的環境中必須可以通過媒體查詢擁有不同的視圖。
 

\

重要的是要注意所有這叁個特征都必須實現,以使真正的響應網頁設計生效。

任何缺少這些特征的設計都不是一個響應網頁設計。它是不可改變的。

接下來,讓我們來深入研究這叁個特征,以更好的理解它們如何融合并給我們帶來完整地響應網頁設計。

靈活的網格

網格這個術語對于網頁設計來說變得很含煳。說你的網站必須由靈活的網格組成并不意味著你被限制于從幾十個現有的很棒的網格系統中選擇一個。

對于列,間距和容器定義自己的參數對于網頁設計來說往往是最好的方案,并且可以與任何現存的系統一樣靈活。

事實上,大多數存在的網格系統都限制于使用CSS類來定義大小,間距和排列。試著附加這些限制到一個響應網頁設計上可能會很棘手并且比寫自己的布局更浪費時間。

不管你是使用預置的網格系統還是使用自定義的解決方案,靈活網格系統真正重要的地方是你的布局大小和間距的機制。

對于網頁設計者,這意味著要放棄我們心愛的像素,并用百分比和em這樣的相對測量單位的網頁布局代替它們。

當然,這不意味著我們不再在我們的圖像編輯軟件(即Photoshop,Fireworks等)中使用像素。取而代之的是,增加的一個需要簡單的數學計算的步驟成為網頁設計過程的一部分,因為我們要將我們的像素轉化為使用相對單位的網頁布局。
 

\

靈活的圖片

圖片隨著我們的靈活的網格移動和縮放是響應網頁設計的更一個關鍵特征。靈活的圖片常常讓網頁設計者有些頭疼。加載一個區大的,超出大小的圖片,并在更小的瀏覽設備我們需要更多的空間來顯示內容時使用HTML的width和height屬性來縮小它不是一個加快網頁加載速度的很好實踐。

當然,這個問題有多大取決于圖片對你的網站帶來的壓力有多大。隨著網頁設計發展,我們看到網站越來越少的使用沒有必要的圖像和圖片庫?赡苓@是一個好機會去評估你的網頁設計是否需要像現在這樣多的圖片。
 

\

另一個縮放圖片的方法是使用CSS裁剪它們。CSS的overflow屬性(比如說overflow:hidden)讓我們能夠動態地裁剪圖片,并使得周圍的空間能夠適合新的顯示環境。

我們也可以在服務器上有多個版本的圖片,并且根據用戶agent等服務器或客戶端特征檢測技術動態地使用不同大小的版本。

最后我們可以完全隱藏圖片,如果我們真的希望關注無圖的內容,可以在樣式表中將圖片設置為display:none。


 

Address
咨詢熱線:028-85555316 and 15378179975
地址:成都市青羊區北大街19號正成·財富領地1棟2901(省市政務中心斜對面)
電話:028-85555316 15378179975
網址:http://www.fadedz.com/  QQ:357898628 snjeso@qq.com
2011 sosbox.cn , All Right Reserved 蜀ICP備09022060號
Share
更多
收縮
  • 電話咨詢

  • 4000-855-316
  • 028-85555316
  • 15608036768
秋霞二级理论