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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    媒體查詢允許設(shè)計(jì)師建立多個布局由選擇性服務(wù)使用相同的HTML文檔的樣式表根據(jù)用戶代理的特性，如瀏覽器窗口的大小。其他參數(shù)是定位(風(fēng)景或肖像)、屏幕分辨率、顏色等等。這是媒體查詢服務(wù)的一個例子一個樣式表根據(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ì)讓我們跳出屏幕大小和分辨率的限制，開始建設(shè)網(wǎng)站，靈活適應(yīng)所有不同的媒體。

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

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

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

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

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

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

    作為雙方引導(dǎo)向?qū)Ψ剑覀儾豢杀苊獾貢絹碓蕉嗟囊粋€機(jī)會來構(gòu)建一個Web更具活力，更迷人，更美麗。

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