響應式網(wǎng)站建設的秘密全過程詳解

大家肯定有過這樣的體驗，有些網(wǎng)站在電腦端使用起來還不錯，但是并沒有做相應的移動端口的適配，導致在用手機瀏覽的時候，非常不便，大大降低了網(wǎng)頁的使用率。

隨著移動端設備的不斷普及和發(fā)展，導致網(wǎng)頁設計也從原來的電腦端，過渡到了移動端。這也就要求我們設計一個網(wǎng)頁的時候需要去適配不同的設備。

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

響應式網(wǎng)頁 RESpONSIVE WEb DESIGN 簡稱為RWD，可以讓網(wǎng)頁自動的適應不同尺寸的顯示器。這種形式的優(yōu)點也是顯而易見的，那就是高適應性和提升網(wǎng)頁的實用性。

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

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

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

當我們的尺寸進一步的縮小，到了移動端，元素自動調(diào)整，依舊是不會影響整個網(wǎng)頁的識別。

而這個網(wǎng)頁，在電腦端觀看沒有任何問題，但是并沒有適配其他的端口，瀏覽起來就會給用戶造成不便，導致用戶流失。

來看這個網(wǎng)頁，在收縮的過程可以明顯看到，每到達一個點的時候，里面的元素就會相應的減少，直到最小。

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

這是一個正常尺寸的網(wǎng)頁的線框圖，我們接下來通過收縮這個網(wǎng)頁，理解中斷點的概念。

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

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

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

到了下一個中斷點的時候，整個元素還是要進行相應的調(diào)整。最常見的做法就是，減少這一屏的元素數(shù)量。保持他們的正常比例不變。

前面講過的中斷點，并不是隨意去設定的數(shù)值，各個大的互聯(lián)網(wǎng)公司，都會制定自己公司的設計指導手冊。我們在剛剛進入這個行業(yè)的時候，如果束手無策，不妨多去看看這些設計的指導手冊。

指導手冊會提供一個規(guī)范的設計標準，確保設計師的設計規(guī)范。就像最簡單的數(shù)學公式。這里我們主要來看一下，谷歌的指導手冊（Material Design）。

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

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

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

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

這個網(wǎng)頁我們在瀏覽的時候，可能會發(fā)現(xiàn)它只有兩個中斷點，其他的時候基本保持不變。

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

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

中斷點越多會讓你的網(wǎng)頁變得更加的細膩，而當我們沒有那么多的時間和精力去做的時候，可以像上面的網(wǎng)頁一樣，只適配兩個尺寸。

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

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

先來看一下固定網(wǎng)格，這里是在收縮網(wǎng)頁的過程中，網(wǎng)格基本固定保持不變，當收縮接近中斷點時，頁面才會發(fā)生變化。

我們先來看一下線框圖，紅色的線段是中斷點的標記。

當我們的頁面收縮到一個中斷點的位置，最邊緣的元素就會自動被減掉，用來適配尺寸。

到達下一個中斷點的時候也是同樣的方式。

固定網(wǎng)格的大的特征是整個網(wǎng)頁，在收縮的過程，到了中斷點就會自動的減少元素，其他元素基本保持不變。
而流動網(wǎng)格的形式，則是相反的，元素會隨著尺寸的變化而變化。

這個網(wǎng)頁，在收縮的過程，到了中斷點就會自動的減少元素，其他元素基本也會隨著尺寸進行相應的變化。

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

以此類推到下一個中斷點的時候，各個元素還是按照比例進行縮放，直到接近下一個中斷點。但并不是每一個中斷點都需要去減少元素，可以適當?shù)陌凑赵氐谋壤M行調(diào)整。

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

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

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

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

這里還是要再強調(diào)一下，網(wǎng)格類型主要是指網(wǎng)格的模式，是固定的還是移動的，和我們在設計中的網(wǎng)格系統(tǒng)有一定的區(qū)別。

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

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

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

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

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

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

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

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

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

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

電腦端的部分設置完成以后，因為是同樣的網(wǎng)格系統(tǒng)，就可以直接移植到其他的屏幕尺寸中去。

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

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

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

這里也同樣可以在xd中進行操作。點擊工具欄的畫板按鈕，右面會出現(xiàn)很多的預設，這個預設會定期更新。
點擊一個平板的預設，就會自動的幫我們設置好8欄的版面網(wǎng)格。繼續(xù)可以選擇手機端的預設，設定出一個4欄的版面網(wǎng)格。這樣三個端口的網(wǎng)頁就已經(jīng)全部設定好了。

同樣的內(nèi)容，我們在電腦端設置完成后?？梢愿尤菀椎倪M行適配。整體不會隨著網(wǎng)格系統(tǒng)的變化發(fā)生太大的改變，因為12欄到8欄也是按照比例進行的改變。

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

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

在做網(wǎng)頁的過程中，很多人會有疑惑，設計網(wǎng)頁先設計電腦端還是手機端，在這里我建議大家先設計電腦端，因為手機端只是一個簡化的過程，相對來說更加的容易。反之，則會加大工作難度。

首先設置網(wǎng)頁的版面網(wǎng)格也就是可視范圍，這里設置了1700px?？梢暦秶酱髨D片的展示效果越好。

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

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

分享標題：響應式網(wǎng)站建設的秘密全過程詳解
文章鏈接：http://www.muchs.cn/news49/295549.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、ChatGPT、微信小程序、域名注冊、云服務器、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)