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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    當(dāng)我們查看響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的三個(gè)特點(diǎn)，真正應(yīng)該很少有興奮。事實(shí)是，90%的響應(yīng)是由什么構(gòu)成的網(wǎng)頁(yè)設(shè)計(jì)是網(wǎng)頁(yè)設(shè)計(jì)好。格式良好的HTML和靈活的布局應(yīng)每日消化的一部分現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)師。網(wǎng)頁(yè)設(shè)計(jì)師所做的提倡響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)僅僅是向我們展示一個(gè)新的方法來(lái)實(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)頁(yè)設(shè)計(jì)讓我們花時(shí)間正確的做事情，而不只是在我們的代碼中，但我們?nèi)绾螛?gòu)思新的創(chuàng)意和執(zhí)行新的設(shè)計(jì)。

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

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

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

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

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