在網站推廣中意識到了用戶體驗的重要性，要想提高網站的用戶體驗不單單是具體在后期的運營維護中，前期網站制作時就要加入響應網頁的元素。而今天筆者小丹要分享的這篇文章就是告訴大家網頁設計的響應元素。

    現(xiàn)在網頁設計張，響應網頁設計在網頁設計中無疑是一個熱門話題。在某種程度上，反應的概念的流行網頁設計是恰如其分的，因為網站用戶越來越多元化的方法訪問一個網站。iPad，iPhone，安卓移動設備、平板上網本—我們在我們的網頁設計必須在數量眾多的方法功能。

    那么現(xiàn)在就讓我們一起探索響應網頁設計背后的意義和原則。

    首先，我們要理解響應Web設計的關鍵特性。為了讓一個網頁設計被認為是“響應”，它需要有三個主要特點。網頁設計/開發(fā)人員伊桑馬克特——作者概念化響應網頁設計—將這些特性描述為：

    1、該網站必須建立一個靈活的網格基礎。

    2、圖像納入設計必須靈活。

    3、必須啟用不同的觀點在不同的上下文中媒體查詢.

    這里值得注意的是，需要實現(xiàn)三個功能為了一個真正響應網頁設計。任何設計缺乏這些特性是不響應web設計，那就是切割和干燥。

    接下來，讓我們來深入研究這三個特性，為了更好地理解它們如何一起工作給我們帶來一個完全響應網頁設計。

    第一，靈活的網格，術語網格同樣適用于網頁設計越來越陰暗。你的網站必須包括一個靈活的網格并不意味著你被限制可供選擇十幾個大電網系統(tǒng)之一。

    定義自己的參數列間距和容器通常是最好的解決方案可以一樣靈活的網頁設計和任何現(xiàn)有的系統(tǒng)。

    事實上，大多數現(xiàn)有的網格系統(tǒng)限制性地使用CSS類來定義大小、空間和對齊。試圖將這些限制到一個響應web設計可以棘手的和更費時編寫自己的網格。你是否使用半成品網格系統(tǒng)或創(chuàng)建一個自定義解決方案，真正重要的方面一個靈活的網格系統(tǒng)的力學布局尺寸和間距。對于網頁設計師來說，這意味著拋棄，代之以我們敬愛的像素網絡布局使用百分比和他們的相對度量單位。

    當然，這并不意味著我們與像素在圖像編輯軟件(即停止工作。Photoshop煙花，等等)。相反，一個額外的步驟，包括一點點的(基本)數學的一部分網頁設計過程當我們把我們的像素轉換成web布局，使用一個相對標準的計量單位。

    第二，靈活的圖像，圖片移動和規(guī)模與我們靈活的網格是響應網頁設計的另一個關鍵特性。靈活的圖像通常會給網頁設計師有點頭痛。加載在巨大，我們減少使用超大的圖片 width和 height文本內容的HTML屬性，當我們想要更多的空間較小的瀏覽設備上并不是一個好的做法更快的網頁加載時間。

    當然，有多大的問題這也是取決于你的網站是需要大量圖片。作為網頁設計的發(fā)展，我們經?？吹降木W站，把不必要的圖片和越來越少了股票的照片。也許這是一個很好的時間來評估你的網頁設計是否需要和目前一樣需要大量圖片。

    另一個縮放圖像是用CSS裁剪。CSS overflow屬性給我們的能力作物圖像動態(tài)作為容器周圍的轉變以適應新的顯示環(huán)境。我們也可以在服務器上有多個版本的圖像，然后動態(tài)服務適當大小的版本根據用戶代理使用服務器端或客戶端特性檢測與DOM操作。

    最后，我們完全可以選擇隱藏圖像如果我們真的想把關注非圖像的內容，使用媒體查詢服務設置的樣式表 display: none財產圖像。

    第三，媒體查詢，媒體查詢可以說是最令人興奮和最令人生畏的web設計人員不熟悉)響應web設計的特性。

    通常，得意忘形的人與媒體查詢，考慮他們的核心組件響應設計，靈活的頁面組件可選。的現(xiàn)實情況是，媒體查詢也有用沒有絕對可靠的HTML和CSS的現(xiàn)有實現(xiàn)基礎不僅包括一個靈活的網格，但靈活的圖像。

    媒體查詢允許設計師建立多個布局由選擇性服務使用相同的HTML文檔的樣式表根據用戶代理的特性，如瀏覽器窗口的大小。其他參數是定位(風景或肖像)、屏幕分辨率、顏色等等。這是媒體查詢服務的一個例子一個樣式表根據瀏覽器窗口的寬度：

    <link rel="stylesheet" media="(max-device-width: 320px) " href="mobile.css " / >
    <link rel="stylesheet" media="(min-width: 1600px) " " href="widescreen.css " / >

    媒體查詢沒有被具體移動解決方案或者平板電腦解決方案。相反，媒體查詢和響應的設計讓我們跳出屏幕大小和分辨率的限制，開始建設網站，靈活適應所有不同的媒體。

    那么，響應網頁設計到底是什么呢？

    當我們查看響應網頁設計的三個特點，真正應該很少有興奮。事實是，90%的響應是由什么構成的網頁設計是網頁設計好。格式良好的HTML和靈活的布局應每日消化的一部分現(xiàn)代網頁設計師。網頁設計師所做的提倡響應網頁設計僅僅是向我們展示一個新的方法來實現(xiàn)我們應該已經做的好的設計實踐。在現(xiàn)代背景下，考慮到需要靈活布局更是當務之急，這樣我們才能更好地適應當前存在的廣泛的瀏覽情況，我們需要流體和靈活的設計。

    響應網頁設計讓我們花時間正確的做事情，而不只是在我們的代碼中，但我們如何構思新的創(chuàng)意和執(zhí)行新的設計。

    我們還沒有人都把一些時間放在處理靈活的內容和媒體查詢將會意識到，這還沒有終結，一切解決方案構建網站迎合每一個用戶代理。用戶瀏覽網絡通過不同的設備通常有不同的需求根據他們使用的設備。

    用戶在移動web瀏覽器很可能盡快訪問核心信息感興趣。對于餐廳來說，這可能意味著菜單，預訂電話號碼，物理地址，等等。在這種情況下，加載整個網站，然后隱藏的90%顯然不存在一個理想的解決方案。

    響應網頁設計變成了什么，然后，是在正確的方向上邁出的一步。很多網站站獲得很多從響應設計，當然每個設計師都應該能夠執(zhí)行此解決方案和搜索優(yōu)化設計的方法。而設計師繼續(xù)取得進展的解決方案，使我們的設計目的是經驗豐富的在每一個設備和情況，設備，反過來，應該努力顯示Web最理想的和直觀的方式。

    作為雙方引導向對方，我們不可避免地會越來越多的一個機會來構建一個Web更具活力，更迷人，更美麗。

    (轉載請注明轉自：www.urbncart.com/news/n1889.htm，謝謝!珍惜別人的勞動成果，就是在尊重自!）