<form id="n155d"></form>

        <address id="n155d"><listing id="n155d"><meter id="n155d"></meter></listing></address>

              深入了解響應式網頁的原理和適配的方法

              來源:研習設    時間:2020-11-13    站內收藏

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

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

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

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

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

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

              深入了解響應式網頁的原理和適配的方法

              響應式網頁 RESPONSIVE WEB DESIGN 簡稱為RWD,可以讓網頁自動的適應不同尺寸的顯示器。這種形式的優點也是顯而易見的,那就是高適應性和提升網頁的實用性。

              深入了解響應式網頁的原理和適配的方法

              這是一個典型的響應式網頁,當在我們縮小這個家具網頁頁面的同時,它的內容也隨著發生改變。

              深入了解響應式網頁的原理和適配的方法

              我們來看一下這個示意圖,這是一個正常尺寸的網頁。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              當我們的尺寸進一步的縮小,到了移動端,元素自動調整,依舊是不會影響整個網頁的識別。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              當網頁收縮到了標記的中斷點的位置以后,整個網頁就要做出相應的調整。不然有些元素就會影響整個網頁的觀感。

              深入了解響應式網頁的原理和適配的方法

              下方的單元型數量減少,保持元素的基本比例不受影響。

              深入了解響應式網頁的原理和適配的方法

              以此類推,繼續收縮這個網頁。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

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

              手冊鏈接:https://material.io/design/

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              在上面的動圖演示中,使用就這個規范里面的數值,這樣,設計出來的響應式網頁會更加的具有規范性。

              深入了解響應式網頁的原理和適配的方法

              這個網頁我們在瀏覽的時候,可能會發現它只有兩個中斷點,其他的時候基本保持不變。

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

              現在大家應該對響應式網頁有一定的了解了。它的高適應可以讓你的網頁,更好地適應不同的設備,并且提高網頁的實用性。

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

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

              深入了解響應式網頁的原理和適配的方法

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

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              固定網格的最大的特征是整個網頁,在收縮的過程,到了中斷點就會自動的減少元素,其他元素基本保持不變。

              深入了解響應式網頁的原理和適配的方法

              而流動網格的形式,則是相反的,元素會隨著尺寸的變化而變化。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              繼續來收縮這個網頁,當網頁收縮接近中斷點的時候,整個網頁中的每一個元素,比例都隨之變化。當到中斷點的時候,邊緣的元素被減掉。

              深入了解響應式網頁的原理和適配的方法

              以此類推到下一個中斷點的時候,各個元素還是按照比例進行縮放,直到接近下一個中斷點。但并不是每一個中斷點都需要去減少元素,可以適當的按照元素的比例進行調整。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              這里除了這樣的繼續兩列展示,還有另外一種形式。直接變成一個單專欄型的網頁展示,這樣可以最大的展示圖像的效果。

              深入了解響應式網頁的原理和適配的方法

              流動網格中,隨著網頁的尺寸變化,整個元素的大小發生著改變。

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

              這里還是要再強調一下,網格類型主要是指網格的模式,是固定的還是移動的,和我們在設計中的網格系統有一定的區別。

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

              深入了解響應式網頁的原理和適配的方法

              首先我們打開頁面后,點擊右下角畫板,會出現網格的菜單,點擊版面按鈕,版面網格就建立完成了。

              深入了解響應式網頁的原理和適配的方法

              建立好版面網格后,下方的數值,它們分別代表著不同的設定,我們一個一個來講解。

              深入了解響應式網頁的原理和適配的方法

              首先是列,這個概念比較清晰,就是網格中的矩形框,這里設置了12列。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              響應式網頁的網格系統分為兩種,第一種是間隔寬度固定的形式。這種網格的形式是網格中的間隔寬度始終保持不變。

              深入了解響應式網頁的原理和適配的方法

              我們現在來看這個網頁,它是一個流動網格的形式,網格系統使用的是間距寬度固定的類型。

              深入了解響應式網頁的原理和適配的方法

              無論網頁是怎么收縮和調整的,間距是始終保持不變的。

              深入了解響應式網頁的原理和適配的方法

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              最后到了手機端,這里大家會明顯的發現,元素的尺寸變小了,而且單屏展示的內容豐富程度提升了。

              深入了解響應式網頁的原理和適配的方法

              相比第一種形式的網格形式,第二種形式是欄數上呈現著每個設備的欄數都不固定的特征,這也是現在比較流行的網格系統的設置方式。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              這里也同樣可以在xd中進行操作。點擊工具欄的畫板按鈕,右面會出現很多的預設,這個預設會定期更新。

              深入了解響應式網頁的原理和適配的方法

              深入了解響應式網頁的原理和適配的方法

              點擊一個平板的預設,就會自動的幫我們設置好8欄的版面網格。繼續可以選擇手機端的預設,設定出一個4欄的版面網格。這樣三個端口的網頁就已經全部設定好了。

              深入了解響應式網頁的原理和適配的方法

              同樣的內容,我們在電腦端設置完成后?梢愿尤菀椎倪M行適配。整體不會隨著網格系統的變化發生太大的改變,因為12欄到8欄也是按照比例進行的改變。

              前面整個的響應式網頁的設置和適配大家應該都已經熟悉了,在設置網格系統的這個步驟時,欄數不固定的類型,現在得到越來越設計師的認可。

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              創建12欄,欄間距20像素的網格系統,這里采用的是間距保持不變的形式。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              首先設置可視范圍,這里設置了900像素。然后設置網格系統,還是同樣的12欄,欄間距20像素。

              深入了解響應式網頁的原理和適配的方法

              最后按照屏幕大小去調整置入版面中。

              深入了解響應式網頁的原理和適配的方法

              由于平板的尺寸和顯示器接近,這里只是微調就可以了。

              深入了解響應式網頁的原理和適配的方法

              深入了解響應式網頁的原理和適配的方法

              手機端的版面就需要進行重新的設置了,第一步還是先要設定版面網格。同樣使用還是20欄,欄間距20像素的網格系統。

              深入了解響應式網頁的原理和適配的方法

              置入畫面,重新設計文字組的形式。這樣手機端就適配完成了。

              深入了解響應式網頁的原理和適配的方法

              繼續適配一下主欄的內容,這里電腦端的內容相對來說,排版比較松散。而手機端也應該相應的保持,這種松散的感覺,但是要盡量的放大圖片,進行展示。

              深入了解響應式網頁的原理和適配的方法

              商品展示這里使用的三欄展示的重復單元型展示商品。手機端則可以適當的簡化,放置兩個商品進行展示。

              深入了解響應式網頁的原理和適配的方法

              電腦端部分使用的是左右組合的單元型形式,手機端就要盡量的去簡化。

              視頻可以直接展示放在手機中,下方的關于我們變成一個通欄的形式,放置于黑色背景上,和網頁中的保持一致。

              深入了解響應式網頁的原理和適配的方法

              網頁端的聯系我們這一部分,高度是屏幕的高度,手機中不需要這么嚴格的設置,只需要按照通欄的形式進行編排。保持手機端上下部分的統一性,以及和電腦端的關聯性。

              深入了解響應式網頁的原理和適配的方法

              這樣我們整個網頁的適配就完成了。

              今天我們講解的響應式網頁,可以使你的網頁適配各種顯示器的尺寸,更好的瀏覽網頁的內容。

              現在了解響應式網頁的原理和適配的方法,剩下的就是需要你不斷的去積累手機端和電腦端相關的表現形式。


              深入了解響應式網頁的原理和適配的方法

              響應式網頁 RESPONSIVE WEB DESIGN 簡稱為RWD,可以讓網頁自動的適應不同尺寸的顯示器。這種形式的優點也是顯而易見的,那就是高適應性和提升網頁的實用性。

              深入了解響應式網頁的原理和適配的方法

              這是一個典型的響應式網頁,當在我們縮小這個家具網頁頁面的同時,它的內容也隨著發生改變。

              深入了解響應式網頁的原理和適配的方法

              我們來看一下這個示意圖,這是一個正常尺寸的網頁。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              當我們的尺寸進一步的縮小,到了移動端,元素自動調整,依舊是不會影響整個網頁的識別。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              當網頁收縮到了標記的中斷點的位置以后,整個網頁就要做出相應的調整。不然有些元素就會影響整個網頁的觀感。

              深入了解響應式網頁的原理和適配的方法

              下方的單元型數量減少,保持元素的基本比例不受影響。

              深入了解響應式網頁的原理和適配的方法

              以此類推,繼續收縮這個網頁。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

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

              手冊鏈接:https://material.io/design/

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              在上面的動圖演示中,使用就這個規范里面的數值,這樣,設計出來的響應式網頁會更加的具有規范性。

              深入了解響應式網頁的原理和適配的方法

              這個網頁我們在瀏覽的時候,可能會發現它只有兩個中斷點,其他的時候基本保持不變。

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

              現在大家應該對響應式網頁有一定的了解了。它的高適應可以讓你的網頁,更好地適應不同的設備,并且提高網頁的實用性。

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

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

              深入了解響應式網頁的原理和適配的方法

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

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              固定網格的最大的特征是整個網頁,在收縮的過程,到了中斷點就會自動的減少元素,其他元素基本保持不變。

              深入了解響應式網頁的原理和適配的方法

              而流動網格的形式,則是相反的,元素會隨著尺寸的變化而變化。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              繼續來收縮這個網頁,當網頁收縮接近中斷點的時候,整個網頁中的每一個元素,比例都隨之變化。當到中斷點的時候,邊緣的元素被減掉。

              深入了解響應式網頁的原理和適配的方法

              以此類推到下一個中斷點的時候,各個元素還是按照比例進行縮放,直到接近下一個中斷點。但并不是每一個中斷點都需要去減少元素,可以適當的按照元素的比例進行調整。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              這里除了這樣的繼續兩列展示,還有另外一種形式。直接變成一個單專欄型的網頁展示,這樣可以最大的展示圖像的效果。

              深入了解響應式網頁的原理和適配的方法

              流動網格中,隨著網頁的尺寸變化,整個元素的大小發生著改變。

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

              這里還是要再強調一下,網格類型主要是指網格的模式,是固定的還是移動的,和我們在設計中的網格系統有一定的區別。

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

              深入了解響應式網頁的原理和適配的方法

              首先我們打開頁面后,點擊右下角畫板,會出現網格的菜單,點擊版面按鈕,版面網格就建立完成了。

              深入了解響應式網頁的原理和適配的方法

              建立好版面網格后,下方的數值,它們分別代表著不同的設定,我們一個一個來講解。

              深入了解響應式網頁的原理和適配的方法

              首先是列,這個概念比較清晰,就是網格中的矩形框,這里設置了12列。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              響應式網頁的網格系統分為兩種,第一種是間隔寬度固定的形式。這種網格的形式是網格中的間隔寬度始終保持不變。

              深入了解響應式網頁的原理和適配的方法

              我們現在來看這個網頁,它是一個流動網格的形式,網格系統使用的是間距寬度固定的類型。

              深入了解響應式網頁的原理和適配的方法

              無論網頁是怎么收縮和調整的,間距是始終保持不變的。

              深入了解響應式網頁的原理和適配的方法

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              最后到了手機端,這里大家會明顯的發現,元素的尺寸變小了,而且單屏展示的內容豐富程度提升了。

              深入了解響應式網頁的原理和適配的方法

              相比第一種形式的網格形式,第二種形式是欄數上呈現著每個設備的欄數都不固定的特征,這也是現在比較流行的網格系統的設置方式。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              這里也同樣可以在xd中進行操作。點擊工具欄的畫板按鈕,右面會出現很多的預設,這個預設會定期更新。

              深入了解響應式網頁的原理和適配的方法

              深入了解響應式網頁的原理和適配的方法

              點擊一個平板的預設,就會自動的幫我們設置好8欄的版面網格。繼續可以選擇手機端的預設,設定出一個4欄的版面網格。這樣三個端口的網頁就已經全部設定好了。

              深入了解響應式網頁的原理和適配的方法

              同樣的內容,我們在電腦端設置完成后?梢愿尤菀椎倪M行適配。整體不會隨著網格系統的變化發生太大的改變,因為12欄到8欄也是按照比例進行的改變。

              前面整個的響應式網頁的設置和適配大家應該都已經熟悉了,在設置網格系統的這個步驟時,欄數不固定的類型,現在得到越來越設計師的認可。

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

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              創建12欄,欄間距20像素的網格系統,這里采用的是間距保持不變的形式。

              深入了解響應式網頁的原理和適配的方法

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

              深入了解響應式網頁的原理和適配的方法

              首先設置可視范圍,這里設置了900像素。然后設置網格系統,還是同樣的12欄,欄間距20像素。

              深入了解響應式網頁的原理和適配的方法

              最后按照屏幕大小去調整置入版面中。

              深入了解響應式網頁的原理和適配的方法

              由于平板的尺寸和顯示器接近,這里只是微調就可以了。

              深入了解響應式網頁的原理和適配的方法

              深入了解響應式網頁的原理和適配的方法

              手機端的版面就需要進行重新的設置了,第一步還是先要設定版面網格。同樣使用還是20欄,欄間距20像素的網格系統。

              深入了解響應式網頁的原理和適配的方法

              置入畫面,重新設計文字組的形式。這樣手機端就適配完成了。

              深入了解響應式網頁的原理和適配的方法

              繼續適配一下主欄的內容,這里電腦端的內容相對來說,排版比較松散。而手機端也應該相應的保持,這種松散的感覺,但是要盡量的放大圖片,進行展示。

              深入了解響應式網頁的原理和適配的方法

              商品展示這里使用的三欄展示的重復單元型展示商品。手機端則可以適當的簡化,放置兩個商品進行展示。

              深入了解響應式網頁的原理和適配的方法

              電腦端部分使用的是左右組合的單元型形式,手機端就要盡量的去簡化。

              視頻可以直接展示放在手機中,下方的關于我們變成一個通欄的形式,放置于黑色背景上,和網頁中的保持一致。

              深入了解響應式網頁的原理和適配的方法

              網頁端的聯系我們這一部分,高度是屏幕的高度,手機中不需要這么嚴格的設置,只需要按照通欄的形式進行編排。保持手機端上下部分的統一性,以及和電腦端的關聯性。

              深入了解響應式網頁的原理和適配的方法

              這樣我們整個網頁的適配就完成了。

              今天我們講解的響應式網頁,可以使你的網頁適配各種顯示器的尺寸,更好的瀏覽網頁的內容。

              現在了解響應式網頁的原理和適配的方法,剩下的就是需要你不斷的去積累手機端和電腦端相關的表現形式。

              本文來源:研習設

              上一篇:返回列表
              關鍵詞: 響應式網頁 
              作者:cdo
              相關閱讀
                正在加載...
              何时开卖彩票