大家肯定有過(guò)這樣的體驗(yàn)，有些網(wǎng)站在電腦端使用起來(lái)還不錯(cuò)，但是并沒(méi)有做相應(yīng)的移動(dòng)端口的適配，導(dǎo)致在用手機(jī)瀏覽的時(shí)候，非常不便，大大降低了網(wǎng)頁(yè)的使用率。

隨著移動(dòng)端設(shè)備的不斷普及和發(fā)展，導(dǎo)致網(wǎng)頁(yè)設(shè)計(jì)也從原來(lái)的電腦端，過(guò)渡到了移動(dòng)端。這也就要求我們設(shè)計(jì)一個(gè)網(wǎng)頁(yè)的時(shí)候需要去適配不同的設(shè)備。

而我們都知道，網(wǎng)頁(yè)設(shè)計(jì)是整體且系統(tǒng)的，在設(shè)計(jì)過(guò)程不能各自適配各自的端口，那樣會(huì)導(dǎo)致整個(gè)網(wǎng)頁(yè)設(shè)計(jì)的項(xiàng)目不統(tǒng)一。再加上現(xiàn)在各種尺寸的顯示器，沒(méi)有辦法一一進(jìn)行統(tǒng)計(jì)和適配。今天我們就來(lái)講解一下怎么去解決這個(gè)問(wèn)題。

大家肯定有過(guò)這樣的體驗(yàn)，有些網(wǎng)站在電腦端使用起來(lái)還不錯(cuò)，但是并沒(méi)有做相應(yīng)的移動(dòng)端口的適配，導(dǎo)致在用手機(jī)瀏覽的時(shí)候，非常不便，大大降低了網(wǎng)頁(yè)的使用率。

隨著移動(dòng)端設(shè)備的不斷普及和發(fā)展，導(dǎo)致網(wǎng)頁(yè)設(shè)計(jì)也從原來(lái)的電腦端，過(guò)渡到了移動(dòng)端。這也就要求我們設(shè)計(jì)一個(gè)網(wǎng)頁(yè)的時(shí)候需要去適配不同的設(shè)備。

而我們都知道，網(wǎng)頁(yè)設(shè)計(jì)是整體且系統(tǒng)的，在設(shè)計(jì)過(guò)程不能各自適配各自的端口，那樣會(huì)導(dǎo)致整個(gè)網(wǎng)頁(yè)設(shè)計(jì)的項(xiàng)目不統(tǒng)一。再加上現(xiàn)在各種尺寸的顯示器，沒(méi)有辦法一一進(jìn)行統(tǒng)計(jì)和適配。今天我們就來(lái)講解一下怎么去解決這個(gè)問(wèn)題。

響應(yīng)式網(wǎng)頁(yè) RESPONSIVE WEB DESIGN 簡(jiǎn)稱為RWD，可以讓網(wǎng)頁(yè)自動(dòng)的適應(yīng)不同尺寸的顯示器。這種形式的優(yōu)點(diǎn)也是顯而易見(jiàn)的，那就是高適應(yīng)性和提升網(wǎng)頁(yè)的實(shí)用性。

這是一個(gè)典型的響應(yīng)式網(wǎng)頁(yè)，當(dāng)在我們縮小這個(gè)家具網(wǎng)頁(yè)頁(yè)面的同時(shí)，它的內(nèi)容也隨著發(fā)生改變。

我們來(lái)看一下這個(gè)示意圖，這是一個(gè)正常尺寸的網(wǎng)頁(yè)。

當(dāng)我們縮小它的尺寸時(shí)，里面每一個(gè)元素都會(huì)相應(yīng)的發(fā)生改變，現(xiàn)在看到的是一個(gè)平板端口的尺寸，內(nèi)容并沒(méi)有受到任何的影響。

當(dāng)我們的尺寸進(jìn)一步的縮小，到了移動(dòng)端，元素自動(dòng)調(diào)整，依舊是不會(huì)影響整個(gè)網(wǎng)頁(yè)的識(shí)別。

而這個(gè)網(wǎng)頁(yè)，在電腦端觀看沒(méi)有任何問(wèn)題，但是并沒(méi)有適配其他的端口，瀏覽起來(lái)就會(huì)給用戶造成不便，導(dǎo)致用戶流失。

來(lái)看這個(gè)網(wǎng)頁(yè)，在收縮的過(guò)程可以明顯看到，每到達(dá)一個(gè)點(diǎn)的時(shí)候，里面的元素就會(huì)相應(yīng)的減少，直到最小。

中斷點(diǎn)，是網(wǎng)頁(yè)在收縮的過(guò)程中的最小范圍。當(dāng)網(wǎng)頁(yè)到達(dá)這個(gè)范圍以后，網(wǎng)頁(yè)內(nèi)部的元素就要進(jìn)行相應(yīng)的變化，用來(lái)適應(yīng)網(wǎng)頁(yè)尺寸的變化。

這是一個(gè)正常尺寸的網(wǎng)頁(yè)的線框圖，我們接下來(lái)通過(guò)收縮這個(gè)網(wǎng)頁(yè)，理解中斷點(diǎn)的概念。

當(dāng)網(wǎng)頁(yè)收縮到了標(biāo)記的中斷點(diǎn)的位置以后，整個(gè)網(wǎng)頁(yè)就要做出相應(yīng)的調(diào)整。不然有些元素就會(huì)影響整個(gè)網(wǎng)頁(yè)的觀感。

下方的單元型數(shù)量減少，保持元素的基本比例不受影響。

以此類推，繼續(xù)收縮這個(gè)網(wǎng)頁(yè)。

到了下一個(gè)中斷點(diǎn)的時(shí)候，整個(gè)元素還是要進(jìn)行相應(yīng)的調(diào)整。最常見(jiàn)的做法就是，減少這一屏的元素?cái)?shù)量。保持他們的正常比例不變。

前面講過(guò)的中斷點(diǎn)，并不是隨意去設(shè)定的數(shù)值，各個(gè)大的互聯(lián)網(wǎng)公司，都會(huì)制定自己公司的設(shè)計(jì)指導(dǎo)手冊(cè)。我們?cè)趧倓傔M(jìn)入這個(gè)行業(yè)的時(shí)候，如果束手無(wú)策，不妨多去看看這些設(shè)計(jì)的指導(dǎo)手冊(cè)。

指導(dǎo)手冊(cè)會(huì)提供一個(gè)規(guī)范的設(shè)計(jì)標(biāo)準(zhǔn)，確保設(shè)計(jì)師的設(shè)計(jì)規(guī)范。就像最簡(jiǎn)單的數(shù)學(xué)公式。這里我們主要來(lái)看一下，谷歌的指導(dǎo)手冊(cè)（Material Design）。

這份指導(dǎo)手冊(cè)，涵蓋整個(gè)顯示器端的內(nèi)容，從最開(kāi)始的網(wǎng)格搭建，到大的設(shè)計(jì)原則。大家感興趣可以去這個(gè)網(wǎng)站看一下。

今天我們主要來(lái)看的是，這里面給我們提供的關(guān)于中斷點(diǎn)的信息。黃色標(biāo)記的位置就是中斷點(diǎn)的信息。

這份表格里面規(guī)定的數(shù)值很多，在適配的時(shí)候不需要全部都做，我們只需要挑選幾個(gè)常見(jiàn)的就可以了。

在上面的動(dòng)圖演示中，使用就這個(gè)規(guī)范里面的數(shù)值，這樣，設(shè)計(jì)出來(lái)的響應(yīng)式網(wǎng)頁(yè)會(huì)更加的具有規(guī)范性。

這個(gè)網(wǎng)頁(yè)我們?cè)跒g覽的時(shí)候，可能會(huì)發(fā)現(xiàn)它只有兩個(gè)中斷點(diǎn)，其他的時(shí)候基本保持不變。

這是因?yàn)椋�平板端基本可以直接沿用電腦端的相關(guān)尺寸，而手機(jī)端必須要重新的適配。

現(xiàn)在大家應(yīng)該對(duì)響應(yīng)式網(wǎng)頁(yè)有一定的了解了。它的高適應(yīng)可以讓你的網(wǎng)頁(yè)，更好地適應(yīng)不同的設(shè)備，并且提高網(wǎng)頁(yè)的實(shí)用性。

中斷點(diǎn)越多會(huì)讓你的網(wǎng)頁(yè)變得更加的細(xì)膩，而當(dāng)我們沒(méi)有那么多的時(shí)間和精力去做的時(shí)候，可以像上面的網(wǎng)頁(yè)一樣，只適配兩個(gè)尺寸。

這樣可以確保大部分的用戶都可以接受到網(wǎng)頁(yè)的信息。接下來(lái)，我們來(lái)看一下，響應(yīng)式網(wǎng)頁(yè)的類型都有哪些。

響應(yīng)式網(wǎng)頁(yè)的類型分為兩種，固定網(wǎng)格和流動(dòng)網(wǎng)格，這里的網(wǎng)格并不是我們熟知的網(wǎng)格系統(tǒng)的建立，而是在收縮網(wǎng)頁(yè)的時(shí)候，網(wǎng)格的變化模式。

先來(lái)看一下固定網(wǎng)格，這里是在收縮網(wǎng)頁(yè)的過(guò)程中，網(wǎng)格基本固定保持不變，當(dāng)收縮接近中斷點(diǎn)時(shí)，頁(yè)面才會(huì)發(fā)生變化。

我們先來(lái)看一下線框圖，紅色的線段是中斷點(diǎn)的標(biāo)記。

當(dāng)我們的頁(yè)面收縮到一個(gè)中斷點(diǎn)的位置，最邊緣的元素就會(huì)自動(dòng)被減掉，用來(lái)適配尺寸。

到達(dá)下一個(gè)中斷點(diǎn)的時(shí)候也是同樣的方式。

固定網(wǎng)格的最大的特征是整個(gè)網(wǎng)頁(yè)，在收縮的過(guò)程，到了中斷點(diǎn)就會(huì)自動(dòng)的減少元素，其他元素基本保持不變。

而流動(dòng)網(wǎng)格的形式，則是相反的，元素會(huì)隨著尺寸的變化而變化。

這個(gè)網(wǎng)頁(yè)，在收縮的過(guò)程，到了中斷點(diǎn)就會(huì)自動(dòng)的減少元素，其他元素基本也會(huì)隨著尺寸進(jìn)行相應(yīng)的變化。

繼續(xù)來(lái)收縮這個(gè)網(wǎng)頁(yè)，當(dāng)網(wǎng)頁(yè)收縮接近中斷點(diǎn)的時(shí)候，整個(gè)網(wǎng)頁(yè)中的每一個(gè)元素，比例都隨之變化。當(dāng)?shù)街袛帱c(diǎn)的時(shí)候，邊緣的元素被減掉。

以此類推到下一個(gè)中斷點(diǎn)的時(shí)候，各個(gè)元素還是按照比例進(jìn)行縮放，直到接近下一個(gè)中斷點(diǎn)。但并不是每一個(gè)中斷點(diǎn)都需要去減少元素，可以適當(dāng)?shù)陌凑赵�素的比例進(jìn)行調(diào)整。

到達(dá)下一個(gè)中斷點(diǎn)，元素繼續(xù)減少，用以適配尺寸。最后到達(dá)最小的尺寸為止。

這里除了這樣的繼續(xù)兩列展示，還有另外一種形式。直接變成一個(gè)單專欄型的網(wǎng)頁(yè)展示，這樣可以最大的展示圖像的效果。

流動(dòng)網(wǎng)格中，隨著網(wǎng)頁(yè)的尺寸變化，整個(gè)元素的大小發(fā)生著改變。

在設(shè)計(jì)的過(guò)程中選擇流動(dòng)網(wǎng)格還是固定網(wǎng)格，主要取決于網(wǎng)頁(yè)的內(nèi)容，圖片和文字可以適應(yīng)隨著網(wǎng)頁(yè)的變化而變化，可以選擇使用流動(dòng)網(wǎng)格，反之則是固定網(wǎng)格。

這里還是要再?gòu)?qiáng)調(diào)一下，網(wǎng)格類型主要是指網(wǎng)格的模式，是固定的還是移動(dòng)的，和我們?cè)?a href=http://m.edabuilding.com/ target=_blank class=infotextkey>設(shè)計(jì)中的網(wǎng)格系統(tǒng)有一定的區(qū)別。

接下來(lái)，Adobe 的Xd 這個(gè)軟件的實(shí)際操作，給大家講解一下。在設(shè)計(jì)響應(yīng)式網(wǎng)頁(yè)的時(shí)候，如何去按照不同的端口去設(shè)置網(wǎng)格系統(tǒng)。

首先我們打開(kāi)頁(yè)面后，點(diǎn)擊右下角畫板，會(huì)出現(xiàn)網(wǎng)格的菜單，點(diǎn)擊版面按鈕，版面網(wǎng)格就建立完成了。

建立好版面網(wǎng)格后，下方的數(shù)值，它們分別代表著不同的設(shè)定，我們一個(gè)一個(gè)來(lái)講解。

首先是列，這個(gè)概念比較清晰，就是網(wǎng)格中的矩形框，這里設(shè)置了12列。

間隔寬度則是矩形框之間的距離，這里設(shè)置了16像素。

列寬則是矩形框的寬度，這里是135像素。

響應(yīng)式網(wǎng)頁(yè)的網(wǎng)格系統(tǒng)分為兩種，第一種是間隔寬度固定的形式。這種網(wǎng)格的形式是網(wǎng)格中的間隔寬度始終保持不變。

我們現(xiàn)在來(lái)看這個(gè)網(wǎng)頁(yè)，它是一個(gè)流動(dòng)網(wǎng)格的形式，網(wǎng)格系統(tǒng)使用的是間距寬度固定的類型。

無(wú)論網(wǎng)頁(yè)是怎么收縮和調(diào)整的，間距是始終保持不變的。

在Adobe Xd 軟件中就可以直接操作了，模擬收縮網(wǎng)頁(yè)的方式，右下角的間隔寬度始終保持不變。

電腦端的部分設(shè)置完成以后，因?yàn)槭峭瑯拥木W(wǎng)格系統(tǒng)，就可以直接移植到其他的屏幕尺寸中去。

最后到了手機(jī)端，這里大家會(huì)明顯的發(fā)現(xiàn)，元素的尺寸變小了，而且單屏展示的內(nèi)容豐富程度提升了。

相比第一種形式的網(wǎng)格形式，第二種形式是欄數(shù)上呈現(xiàn)著每個(gè)設(shè)備的欄數(shù)都不固定的特征，這也是現(xiàn)在比較流行的網(wǎng)格系統(tǒng)的設(shè)置方式。

再回來(lái)看谷歌的指導(dǎo)手冊(cè)，紅色部分有固定使用的欄數(shù)。由于手機(jī)端的尺寸較小，放置12欄的網(wǎng)格，會(huì)顯得很密集，可以按照谷歌指導(dǎo)手冊(cè)的欄數(shù)規(guī)定進(jìn)行設(shè)置。

這里也同樣可以在xd中進(jìn)行操作。點(diǎn)擊工具欄的畫板按鈕，右面會(huì)出現(xiàn)很多的預(yù)設(shè)，這個(gè)預(yù)設(shè)會(huì)定期更新。

點(diǎn)擊一個(gè)平板的預(yù)設(shè)，就會(huì)自動(dòng)的幫我們?cè)O(shè)置好8欄的版面網(wǎng)格。繼續(xù)可以選擇手機(jī)端的預(yù)設(shè)，設(shè)定出一個(gè)4欄的版面網(wǎng)格。這樣三個(gè)端口的網(wǎng)頁(yè)就已經(jīng)全部設(shè)定好了。

同樣的內(nèi)容，我們?cè)陔娔X端設(shè)置完成后�？梢愿�加容易的進(jìn)行適配。整體不會(huì)隨著網(wǎng)格系統(tǒng)的變化發(fā)生太大的改變，因?yàn)?2欄到8欄也是按照比例進(jìn)行的改變。

前面整個(gè)的響應(yīng)式網(wǎng)頁(yè)的設(shè)置和適配大家應(yīng)該都已經(jīng)熟悉了，在設(shè)置網(wǎng)格系統(tǒng)的這個(gè)步驟時(shí)，欄數(shù)不固定的類型，現(xiàn)在得到越來(lái)越設(shè)計(jì)師的認(rèn)可。

就像我前面課程中講過(guò)的，網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)模塊化的組織，我們就像拼搭積木一樣進(jìn)行設(shè)計(jì)，網(wǎng)頁(yè)尺寸發(fā)生變化，可以就適當(dāng)?shù)臏p少積木的數(shù)量進(jìn)行適配。接下來(lái)，通過(guò)一個(gè)案例讓大家明白具體的適配思路都有哪些。

在做網(wǎng)頁(yè)的過(guò)程中，很多人會(huì)有疑惑，設(shè)計(jì)網(wǎng)頁(yè)先設(shè)計(jì)電腦端還是手機(jī)端，在這里我建議大家先設(shè)計(jì)電腦端，因?yàn)槭謾C(jī)端只是一個(gè)簡(jiǎn)化的過(guò)程，相對(duì)來(lái)說(shuō)更加的容易。反之，則會(huì)加大工作難度。

首先設(shè)置網(wǎng)頁(yè)的版面網(wǎng)格也就是可視范圍，這里設(shè)置了1700px。可視范圍越大圖片的展示效果越好。

創(chuàng)建12欄，欄間距20像素的網(wǎng)格系統(tǒng)，這里采用的是間距保持不變的形式。

這里主要講解的是響應(yīng)式網(wǎng)頁(yè)的適配方式，版式這里我們就快速略過(guò)。置入圖片，提前做好的導(dǎo)航欄文字組。

首先設(shè)置可視范圍，這里設(shè)置了900像素。然后設(shè)置網(wǎng)格系統(tǒng)，還是同樣的12欄，欄間距20像素。

最后按照屏幕大小去調(diào)整置入版面中。

由于平板的尺寸和顯示器接近，這里只是微調(diào)就可以了。

手機(jī)端的版面就需要進(jìn)行重新的設(shè)置了，第一步還是先要設(shè)定版面網(wǎng)格。同樣使用還是20欄，欄間距20像素的網(wǎng)格系統(tǒng)。

置入畫面，重新設(shè)計(jì)文字組的形式。這樣手機(jī)端就適配完成了。

繼續(xù)適配一下主欄的內(nèi)容，這里電腦端的內(nèi)容相對(duì)來(lái)說(shuō)，排版比較松散。而手機(jī)端也應(yīng)該相應(yīng)的保持，這種松散的感覺(jué)，但是要盡量的放大圖片，進(jìn)行展示。

商品展示這里使用的三欄展示的重復(fù)單元型展示商品。手機(jī)端則可以適當(dāng)?shù)暮?jiǎn)化，放置兩個(gè)商品進(jìn)行展示。

電腦端部分使用的是左右組合的單元型形式，手機(jī)端就要盡量的去簡(jiǎn)化。

視頻可以直接展示放在手機(jī)中，下方的關(guān)于我們變成一個(gè)通欄的形式，放置于黑色背景上，和網(wǎng)頁(yè)中的保持一致。

網(wǎng)頁(yè)端的聯(lián)系我們這一部分，高度是屏幕的高度，手機(jī)中不需要這么嚴(yán)格的設(shè)置，只需要按照通欄的形式進(jìn)行編排。保持手機(jī)端上下部分的統(tǒng)一性，以及和電腦端的關(guān)聯(lián)性。

這樣我們整個(gè)網(wǎng)頁(yè)的適配就完成了。

今天我們講解的響應(yīng)式網(wǎng)頁(yè)，可以使你的網(wǎng)頁(yè)適配各種顯示器的尺寸，更好的瀏覽網(wǎng)頁(yè)的內(nèi)容。

現(xiàn)在了解響應(yīng)式網(wǎng)頁(yè)的原理和適配的方法，剩下的就是需要你不斷的去積累手機(jī)端和電腦端相關(guān)的表現(xiàn)形式。