理解響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)元素

響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)目前在網(wǎng)頁(yè)設(shè)計(jì)中無(wú)疑是一個(gè)熱門(mén)話(huà)題。從某種程度上來(lái)說(shuō)，響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)概念的普及是非常應(yīng)該的，因?yàn)橛脩?hù)以越來(lái)越多樣化的方式訪(fǎng)問(wèn)網(wǎng)站。iPad，iPhone，Android移動(dòng)設(shè)備，桌面，筆記本——現(xiàn)在我們的網(wǎng)頁(yè)設(shè)計(jì)必須在眾多方式下使用。

讓我們來(lái)了解響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的含意和塬則。

響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵特征

認(rèn)為網(wǎng)頁(yè)設(shè)計(jì)是“響應(yīng)”的，需要有叁個(gè)關(guān)鍵牲。網(wǎng)頁(yè)設(shè)計(jì)師和開(kāi)發(fā)者Ethan Marcotte——提出響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的人——將這些特征描述如下：

1.網(wǎng)站必須以靈活的網(wǎng)格為基礎(chǔ)構(gòu)建。

2.設(shè)計(jì)中包含的圖片也必須是靈活的。

3.在不同的環(huán)境中必須可以通過(guò)媒體查詢(xún)擁有不同的視圖。

CSS-Tricks根據(jù)瀏覽器窗口的大小改變它的網(wǎng)頁(yè)布局。

重要的是要注意所有這叁個(gè)特征都必須實(shí)現(xiàn)，以使真正的響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)生效。

任何缺少這些特征的設(shè)計(jì)都不是一個(gè)響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)。它是不可改變的。

接下來(lái)，讓我們來(lái)深入研究這叁個(gè)特征，以更好的理解它們?nèi)绾稳诤喜⒔o我們帶來(lái)完整地響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)。

靈活的網(wǎng)格

網(wǎng)格這個(gè)術(shù)語(yǔ)對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)變得很含煳。說(shuō)你的網(wǎng)站必須由靈活的網(wǎng)格組成并不意味著你被限制于從幾十個(gè)現(xiàn)有的很棒的網(wǎng)格系統(tǒng)中選擇一個(gè)。

對(duì)于列，間距和容器定義自己的參數(shù)對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)往往是好的方案，并且可以與任何現(xiàn)存的系統(tǒng)一樣靈活。

事實(shí)上，大多數(shù)存在的網(wǎng)格系統(tǒng)都限制于使用CSS類(lèi)來(lái)定義大小，間距和排列。試著附加這些限制到一個(gè)響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)上可能會(huì)很棘手并且比寫(xiě)自己的布局更浪費(fèi)時(shí)間。

不管你是使用預(yù)置的網(wǎng)格系統(tǒng)還是使用自定義的解決方案，靈活網(wǎng)格系統(tǒng)真正重要的地方是你的布局大小和間距的機(jī)制。

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者，這意味著要放棄我們心愛(ài)的像素，并用百分比和em這樣的相對(duì)測(cè)量單位的網(wǎng)頁(yè)布局代替它們。

當(dāng)然，這不意味著我們不再在我們的圖像編輯軟件（即Photoshop，F(xiàn)ireworks等）中使用像素。取而代之的是，增加的一個(gè)需要簡(jiǎn)單的數(shù)學(xué)計(jì)算的步驟成為網(wǎng)頁(yè)設(shè)計(jì)過(guò)程的一部分，因?yàn)槲覀円獙⑽覀兊南袼剞D(zhuǎn)化為使用相對(duì)單位的網(wǎng)頁(yè)布局。

St Paul’s School網(wǎng)站使用了靈活的網(wǎng)格布局，它可以根據(jù)瀏覽器的窗口大小改變布局，布局的改變以平滑的動(dòng)畫(huà)來(lái)展示。

靈活的圖片

圖片隨著我們的靈活的網(wǎng)格移動(dòng)和縮放是響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的更一個(gè)關(guān)鍵特征。靈活的圖片常常讓網(wǎng)頁(yè)設(shè)計(jì)者有些頭疼。加載一個(gè)區(qū)大的，超出大小的圖片，并在更小的瀏覽設(shè)備我們需要更多的空間來(lái)顯示內(nèi)容時(shí)使用HTML的width和height屬性來(lái)縮小它不是一個(gè)加快網(wǎng)頁(yè)加載速度的很好實(shí)踐。

當(dāng)然，這個(gè)問(wèn)題有多大取決于圖片對(duì)你的網(wǎng)站帶來(lái)的壓力有多大。隨著網(wǎng)頁(yè)設(shè)計(jì)發(fā)展，我們看到網(wǎng)站越來(lái)越少的使用沒(méi)有必要的圖像和圖片庫(kù)。可能這是一個(gè)好機(jī)會(huì)去評(píng)估你的網(wǎng)頁(yè)設(shè)計(jì)是否需要像現(xiàn)在這樣多的圖片。

另一個(gè)縮放圖片的方法是使用CSS裁剪它們。CSS的overflow屬性（比如說(shuō)overflow:hidden）讓我們能夠動(dòng)態(tài)地裁剪圖片，并使得周?chē)目臻g能夠適合新的顯示環(huán)境。

我們也可以在服務(wù)器上有多個(gè)版本的圖片，并且根據(jù)用戶(hù)agent等服務(wù)器或客戶(hù)端特征檢測(cè)技術(shù)動(dòng)態(tài)地使用不同大小的版本。

最后我們可以完全隱藏圖片，如果我們真的希望關(guān)注無(wú)圖的內(nèi)容，可以在樣式表中將圖片設(shè)置為display:none。

Think Vitamin中的圖片元素是靈活的，它們根據(jù)瀏覽器窗口大小縮放。

媒體查詢(xún)

媒體查詢(xún)對(duì)于響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)無(wú)疑是最令人興奮（也是對(duì)于不熟悉它們的人最可怕的）特征。

人們時(shí)常會(huì)對(duì)媒體查詢(xún)有錯(cuò)誤的理解，把它當(dāng)作是一個(gè)響應(yīng)設(shè)計(jì)的核心部分而認(rèn)為靈活是可有可無(wú)的。真實(shí)的情況是，如果沒(méi)有實(shí)現(xiàn)包括靈活網(wǎng)格和靈活圖片在內(nèi)的堅(jiān)實(shí)的HTML和CSS基礎(chǔ)，媒體查詢(xún)幾乎是沒(méi)有用的。

媒體查詢(xún)?cè)试S設(shè)計(jì)者使用相同的HTML文檔創(chuàng)建多個(gè)布局，通過(guò)基于用戶(hù)agent特性（如瀏覽器窗口大?。﹣?lái)選擇不同的樣式來(lái)實(shí)現(xiàn)。其它參數(shù)有方位，屏幕方案，顏色（即屏幕可以渲染多少種顏色）等等。

下面是媒體查詢(xún)根據(jù)窗口寬度來(lái)選擇樣式的例子：

媒體查詢(xún)沒(méi)有明確是移動(dòng)解決方案還是平板方案。取而代之的是，媒體查詢(xún)和響應(yīng)設(shè)計(jì)允許我們跳出屏幕大小或方案來(lái)思考，并且開(kāi)始創(chuàng)建一個(gè)靈活的適應(yīng)所有不同媒介的網(wǎng)站。

UX London uses meta viewport to set the scale and layout width.

響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)到底是什幺

雖然我們研究了響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的叁個(gè)特征，但是好像真的沒(méi)什幺值得興奮的。事實(shí)上90%構(gòu)成響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的是良好的網(wǎng)頁(yè)設(shè)計(jì)的開(kāi)頭。組織良好的HTML和靈活的布局對(duì)于現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)是日常工作的一部分。Marcotte提倡響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)所做的事就是向我們展示一種新的方法來(lái)實(shí)現(xiàn)我們不管如何都本應(yīng)該做到的良好設(shè)計(jì)實(shí)踐。在現(xiàn)代環(huán)境下，提供靈活的布局更加有必要，這樣我們可以更好的適應(yīng)現(xiàn)存的多樣的瀏覽情況，我們要設(shè)計(jì)得更流暢和靈活。

響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)讓我們關(guān)注于花時(shí)間去做正確的事，不僅僅是我們?nèi)绾螌?xiě)代碼，而且是構(gòu)思新想法和執(zhí)行新的設(shè)計(jì)。

8 Faces magazine具有靈活的布局

這還不夠

任何有過(guò)創(chuàng)建靈活內(nèi)容和媒體查詢(xún)經(jīng)驗(yàn)的人都會(huì)意識(shí)到這并不是創(chuàng)建適應(yīng)每一個(gè)用戶(hù)agent網(wǎng)站的最終的，一切的解決方案。用戶(hù)通過(guò)不同的瀏覽設(shè)備瀏覽網(wǎng)站通常會(huì)有不同的需求，這取決于他們使用的設(shè)備。

移動(dòng)瀏覽器用戶(hù)可能最關(guān)心的是可以盡快地訪(fǎng)問(wèn)到最核心的信息。對(duì)于酒店來(lái)說(shuō)，可能是菜單，服務(wù)電話(huà)號(hào)碼，物理地址以及樓層等。對(duì)于這樣的情況，下載整個(gè)網(wǎng)站并顯式的隱藏90%的內(nèi)容并不是一個(gè)好的方案。

正確的方向

響應(yīng)網(wǎng)頁(yè)設(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)頁(yè)上尋找最好的和直接的方法。

兩者相輔相成，我們就必然會(huì)有越來(lái)越多的機(jī)會(huì)來(lái)創(chuàng)建更動(dòng)態(tài)，更有魅力并且更美麗的Web世界。

當(dāng)前名稱(chēng)：理解響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)元素
網(wǎng)頁(yè)URL：http://muchs.cn/news33/218383.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、建站公司、外貿(mào)建站、網(wǎng)站內(nèi)鏈、云服務(wù)器、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)