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

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

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

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

    1、該網(wǎng)站必須建立一個靈活的網(wǎng)格基礎(chǔ)。

    2、圖像納入設(shè)計必須靈活。

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

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

    接下來，讓我們來深入研究這三個特性，為了更好地理解它們?nèi)绾我黄鸸ぷ鹘o我們帶來一個完全響應網(wǎng)頁設(shè)計。

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

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

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

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

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

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

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

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

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

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

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

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

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

    那么，響應網(wǎng)頁設(shè)計到底是什么呢？

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

    響應網(wǎng)頁設(shè)計讓我們花時間正確的做事情，而不只是在我們的代碼中，但我們?nèi)绾螛?gòu)思新的創(chuàng)意和執(zhí)行新的設(shè)計。

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

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

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

    作為雙方引導向?qū)Ψ?，我們不可避免地會越來越多的一個機會來構(gòu)建一個Web更具活力，更迷人，更美麗。

    (轉(zhuǎn)載請注明轉(zhuǎn)自：mjyil.cn/news/n1889.htm，謝謝!珍惜別人的勞動成果，就是在尊重自!）