|
靈活的圖片
圖片隨著我們的靈活的網(wǎng)格移動和縮放是響應(yīng)網(wǎng)頁設(shè)計(jì)的更一個(gè)關(guān)鍵特征。靈活的圖片常常讓網(wǎng)頁設(shè)計(jì)者有些頭疼。加載一個(gè)區(qū)大的，超出大小的圖片，并在更小的瀏覽設(shè)備我們需要更多的空間來顯示內(nèi)容時(shí)使用HTML的width和height屬性來縮小它不是一個(gè) 加快網(wǎng)頁加載速度 的很好實(shí)踐。
當(dāng)然，這個(gè)問題有多大取決于圖片對你的網(wǎng)站帶來的壓力有多大。隨著網(wǎng)頁設(shè)計(jì)發(fā)展，我們看到網(wǎng)站越來越少的使用沒有必要的圖像和圖片庫�？赡苓@是一個(gè)好機(jī)會去評估你的網(wǎng)頁設(shè)計(jì)是否需要像現(xiàn)在這樣多的圖片。
另一個(gè)縮放圖片的方法是使用CSS裁剪它們。CSS的overflow屬性（比如說overflow:hidden）讓我們能夠動態(tài)地裁剪圖片，并使得周圍的空間能夠適合新的顯示環(huán)境。
我們也可以在服務(wù)器上有多個(gè)版本的圖片，并且根據(jù)用戶agent等服務(wù)器或客戶端特征檢測技術(shù)動態(tài)地使用不同大小的版本。
最后我們可以完全隱藏圖片，如果我們真的希望關(guān)注無圖的內(nèi)容，可以在樣式表中將圖片設(shè)置為display:none。
Think Vitamin 中的圖片元素是靈活的，它們根據(jù)瀏覽器窗口大小縮放。
媒體查詢
媒體查詢對于響應(yīng)網(wǎng)頁設(shè)計(jì)無疑是最令人興奮（也是對于不熟悉它們的人最可怕的）特征。
人們時(shí)常會對媒體查詢有錯(cuò)誤的理解，把它當(dāng)作是一個(gè)響應(yīng)設(shè)計(jì)的核心部分而認(rèn)為靈活是可有可無的。真實(shí)的情況是，如果沒有實(shí)現(xiàn)包括靈活網(wǎng)格和靈活圖片在內(nèi)的堅(jiān)實(shí)的HTML和CSS基礎(chǔ)，媒體查詢幾乎是沒有用的。
媒體查詢允許設(shè)計(jì)者使用相同的HTML文檔創(chuàng)建多個(gè)布局，通過基于用戶agent特性（如瀏覽器窗口大�。﹣磉x擇不同的樣式來實(shí)現(xiàn)。其它參數(shù)有方位，屏幕方案，顏色（即屏幕可以渲染多少種顏色）等等。
下面是媒體查詢根據(jù)窗口寬度來選擇樣式的例子：
<link rel="stylesheet" media="(max-device-width: 320px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 1600px)" href="widescreen.css" />
媒體查詢沒有明確是移動解決方案還是平板方案。取而代之的是，媒體查詢和響應(yīng)設(shè)計(jì)允許我們跳出屏幕大小或方案來思考，并且開始創(chuàng)建一個(gè)靈活的適應(yīng)所有不同媒介的網(wǎng)站。
UX London uses meta viewport to set the scale and layout width.
響應(yīng)網(wǎng)頁設(shè)計(jì)到底是什么
雖然我們研究了響應(yīng)網(wǎng)頁設(shè)計(jì)的三個(gè)特征，但是好像真的沒什么值得興奮的。事實(shí)上90%構(gòu)成響應(yīng)網(wǎng)頁設(shè)計(jì)的是良好的網(wǎng)頁設(shè)計(jì)的開頭。組織良好的HTML和靈活的布局對于現(xiàn)代網(wǎng)頁設(shè)計(jì)來說是日常工作的一部分。Marcotte提倡響應(yīng)網(wǎng)頁設(shè)計(jì)所做的事就是向我們展示一種新的方法來實(shí)現(xiàn)我們不管如何都本應(yīng)該做到的良好設(shè)計(jì)實(shí)踐。在現(xiàn)代環(huán)境下，提供靈活的布局更加有必要，這樣我們可以更好的適應(yīng)現(xiàn)存的多樣的瀏覽情況，我們要設(shè)計(jì)得更流暢和靈活。
響應(yīng)網(wǎng)頁設(shè)計(jì)讓我們關(guān)注于花時(shí)間去做正確的事，不僅僅是我們?nèi)绾螌懘a，而且是構(gòu)思新想法和執(zhí)行新的設(shè)計(jì)。
8 Faces magazine具有靈活的布局
這還不夠
任何有過創(chuàng)建靈活內(nèi)容和媒體查詢經(jīng)驗(yàn)的人都會意識到這并不是創(chuàng)建適應(yīng)每一個(gè)用戶agent網(wǎng)站的最終的，一切的解決方案。用戶通過不同的瀏覽設(shè)備瀏覽網(wǎng)站通常會有不同的需求，這取決于他們使用的設(shè)備。
移動瀏覽器用戶可能最關(guān)心的是可以盡快地訪問到最核心的信息。對于酒店來說，可能是菜單，服務(wù)電話號碼，物理地址以及樓層等。對于這樣的情況，下載整個(gè)網(wǎng)站并顯式的隱藏90%的內(nèi)容并不是一個(gè)完美的方案。
正確的方向
響應(yīng)網(wǎng)頁設(shè)計(jì)是正確方向上的一步。許多網(wǎng)站堅(jiān)持從響應(yīng)設(shè)計(jì)中獲取很多好處，并且每一個(gè)設(shè)計(jì)師肯定應(yīng)該能夠執(zhí)行這個(gè)方案并尋找優(yōu)化他們的設(shè)計(jì)的方法。
當(dāng)設(shè)計(jì)者地在適應(yīng)各種設(shè)備和情況的解決方案上不斷進(jìn)步，設(shè)備也盡可能地努力在顯示網(wǎng)頁上尋找最完美的和直接的方法。
兩者相輔相成，我們就必然會有越來越多的機(jī)會來創(chuàng)建更動態(tài)，更有魅力并且更美麗的Web世界。
而那就是值得奮的事情了[English]
本文鏈接：http://m.95time.cn/tech/web/2011/8385.asp 
出處：rockux
責(zé)任編輯：bluehearts
上一頁 理解響應(yīng)網(wǎng)頁設(shè)計(jì)元素 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 理解響應(yīng)網(wǎng)頁設(shè)計(jì)元素 [2]
