善變的網(wǎng)頁：透過Bootstrap深入了解響應(yīng)式設(shè)計
來源：Kwin_Lin 發(fā)布時間：2018-09-04 16:10:14 閱讀量：1863
寫在前面
近年來，隨著科學(xué)技術(shù)的發(fā)展，終端的分辨率越來越多，響應(yīng)式的設(shè)計氤氳而生。然而，作為設(shè)計師，你是否遇到過這樣的情況：當(dāng)你設(shè)計響應(yīng)式網(wǎng)站的時候，由于不了解其規(guī)范及實(shí)現(xiàn)原理，而根據(jù)自己的理解設(shè)計出了一套設(shè)計稿。然而，當(dāng)這份設(shè)計稿放到開發(fā)面前時，卻發(fā)現(xiàn)很多你考慮得很美好的設(shè)計方案難以被開發(fā)，最終無法還原設(shè)計稿的效果。
本文圍繞響應(yīng)式的設(shè)計方法來寫，重點(diǎn)簡述流式網(wǎng)格、元素切換、響應(yīng)式樣式?？赐瓯疚模兄谀阍O(shè)計出兼容性更強(qiáng)，對開發(fā)友好的響應(yīng)式設(shè)計。對縮短項(xiàng)目的開發(fā)周期，降低項(xiàng)目的開發(fā)、維護(hù)成本，推動項(xiàng)目落地有一定的幫助。
首先，我們先來了解幾個概念。這幾個概念有涉及到設(shè)計，也有涉及到開發(fā)。當(dāng)然，我們的目的不是學(xué)習(xí)開發(fā)技術(shù)，而是通過對這些概念的了解，更好的掌握響應(yīng)式設(shè)計的方法。
1. 響應(yīng)式布局
響應(yīng)式布局是Ethan Marcotte在2010年提出的概念。他認(rèn)為，一個網(wǎng)站能夠兼容多個終端(指不同分辨率，不同Dpi的顯示設(shè)備)，而不是為每一個終端做一個特定的版本，這樣的網(wǎng)站布局方式即稱為響應(yīng)式布局。
由于科技的迅速發(fā)展，終端設(shè)備的分辨率越來越多樣化，響應(yīng)式布局正是為此而生，其目的是確保一個頁面在所有終端上都能呈現(xiàn)出令人滿意的效果。
響應(yīng)式布局結(jié)合多種布局方式，從而確保一個頁面能夠適應(yīng)不同終端的顯示。
常見的動態(tài)布局方式：
（1）自適應(yīng)布局是指當(dāng)視口分辨率改變時，頁面的元素位置會自動調(diào)整以適應(yīng)視口的布局方式。
（2）流式布局是指當(dāng)視口分辨率改變時，頁面元素的寬度根據(jù)百分比壓縮，而高度自動調(diào)整的布局方式。
（3）彈性布局是指當(dāng)視口分辨率改變時，頁面元素按比例縮放從而適應(yīng)視口的布局方式。
（4）響應(yīng)式布局綜合了多種動態(tài)布局，使得頁面在不同分辨率的視口可以呈現(xiàn)出不同的布局。
2. 媒體查詢
媒體查詢這個詞，對于設(shè)計師來說應(yīng)該是非常陌生的。不過如果你是需要編寫web靜態(tài)頁面的網(wǎng)頁設(shè)計師的話，應(yīng)該對此有所了解。
媒體查詢是CSS3(Cascading Style Sheet：層疊樣式表)新增的特性。媒體查詢使得樣式表可以根據(jù)不同的媒體、不同的視口尺寸定義不同的樣式。這種新特性對于設(shè)計響應(yīng)式頁面是非常有意義的。
舉個例子，我們想要設(shè)計一個這樣的卡片：當(dāng)它在PC端時，顯示為一張漂浮著的卡片，而在移動端需要讓它顯示為橫向鋪滿的通欄。
那么，媒體查詢實(shí)現(xiàn)方式及效果如下：
如圖所示，開發(fā)只需要先編寫號移動端的樣式，然后在樣式表中加入寬度大于768px的設(shè)備的樣式表，即可實(shí)現(xiàn)一套前端代碼顯示不同的樣式，而無需為移動端專門編寫一個html元素或者重新制作一個前端頁面。
看到這里，或許有人會疑惑，如果是768px以下的寬度才會顯示移動端的樣式，那么有的大屏手機(jī)寬度分辨率超多768px了，那不是和一般的樣式?jīng)_突了嗎？
其實(shí)，這個問題作為設(shè)計師并不需要考慮，CSS3里面已經(jīng)給我們解決了，前端工程師只需要在head標(biāo)簽中加入
<meta name="viewport" content="width=device-width, maximum-scale=1">
這一句html代碼就可以了。
這句代碼其實(shí)就是規(guī)定了設(shè)備屏幕的寬度按照dp(ios使用pt)來取值。
舉個例子，我們設(shè)計師經(jīng)常用來做移動端設(shè)計尺寸的iphone6的屏幕分辨率為750x1334。邏輯分辨率Pt=375x667，也就是說iphone6的瀏覽器會把屏幕當(dāng)做375px的寬度來顯示。
3. Bootstrap
Bootstrap是目前世界上受眾最廣的web前端框架，集合了世界上許多前端工程師的心血和經(jīng)驗(yàn)，非常適用于響應(yīng)式和移動設(shè)備的開發(fā)。學(xué)習(xí)Bootstrap，有助于深入了解響應(yīng)式的實(shí)現(xiàn)原理和應(yīng)用方式。
4. 網(wǎng)格系統(tǒng)(Grid System)
這里說的網(wǎng)格系統(tǒng)當(dāng)然不是排版布局中用到的柵格網(wǎng)格，而是響應(yīng)式布局中用來控制列寬和列數(shù)的流式網(wǎng)格系統(tǒng)，其特點(diǎn)是隨著視口尺寸的變化，網(wǎng)格的列寬和列數(shù)會有不同變化，以適應(yīng)不同尺寸的視口。
本文以Bootstrap的網(wǎng)格系統(tǒng)為例，講解響應(yīng)式布局中網(wǎng)格設(shè)計的規(guī)范。
一、布局容器
布局容器可以理解為主視圖區(qū)域，見下圖：
傳統(tǒng)的靜態(tài)布局頁面一般會采用1000px、1100px 或 1200px等寬度作為容器寬度進(jìn)行設(shè)計。
在響應(yīng)式布局中，一般有兩種容器類型：響應(yīng)式固定寬度容器和全屏寬度容器。
（1）響應(yīng)式的固定寬度容器：
響應(yīng)式布局中，由于需要兼容不同寬度的視口，容器顯然不能采用固定的尺寸作為寬度。所以，響應(yīng)式布局所采用的固定寬度容器會根據(jù)視口的尺寸而進(jìn)行調(diào)整，常用的規(guī)范如下：
（2）全屏寬度容器：
顧名思義，全屏寬度容器就是我們用來設(shè)計全屏網(wǎng)站所采用的容器尺寸，它在任何時候，容器寬度都為100%
二、網(wǎng)格系統(tǒng)
1. 從bootstrap的網(wǎng)格系統(tǒng)開始
網(wǎng)格系統(tǒng)是響應(yīng)式設(shè)計的核心，通過對界面元素定義不同分辨率下的網(wǎng)格列數(shù)，可以實(shí)現(xiàn)元素的響應(yīng)式。
網(wǎng)格常見的有12列、16列、24列，之所以采用這樣的數(shù)字，是因?yàn)?，這樣的網(wǎng)格可以很好的根據(jù)需要均分出1列、2列、3列、4列……等適用于多種情況的網(wǎng)格。
12列可分成：1列、2列、3列、4列、6列、12列。
16列可分成：1列、2列、4列、8列、16列。
24列……
以bootstrap為例，它使用的是12列網(wǎng)格系統(tǒng)，并且支持嵌套(嵌套后面再講)。
我們通過例子來講使用網(wǎng)格設(shè)計響應(yīng)式布局的方法。
假設(shè)我們要設(shè)計一個圖文列表頁，例如站酷首頁、Dribbble首頁這樣的。同時，我們想要做到更好的自適應(yīng)：1200px以上的視口，顯示六列。992px - 1200px的視口，顯示3列。
768px - 992px 的視口，顯示兩列。而小于768px的視口，則顯示1列(類似于站酷APP)。
利用，網(wǎng)格系統(tǒng)，我們可以這樣設(shè)計：
這樣的響應(yīng)式設(shè)計，對于掌握響應(yīng)式框架、懂得網(wǎng)格系統(tǒng)的開發(fā)人員來說，只需要非常少量的代碼就可以搞定。
當(dāng)然，網(wǎng)格系統(tǒng)的應(yīng)用場景不單單是等列寬列表，它幾乎可以用在一切布局上。
比如，不對等的布局：
再比如只占據(jù)一半內(nèi)容的布局：
1. 網(wǎng)格嵌套
首先看下面的例子：
從上面例子中應(yīng)該容易理解嵌套。
網(wǎng)格嵌套就是指一個網(wǎng)格系統(tǒng)中可以再嵌套一個網(wǎng)格系統(tǒng)，嵌套的網(wǎng)格系統(tǒng)還可以繼續(xù)嵌套。從而構(gòu)建更加復(fù)雜的布局。
三、元素切換
在響應(yīng)式布局中元素的切換是指，不同元素根據(jù)終端尺寸不同自動切換顯示、隱藏狀態(tài)的行為。
元素的切換應(yīng)用場景：
1. 在大屏到小屏的變化過程中，隱藏部分信息。
2. 對于某些需要在不同終端上需要呈現(xiàn)截然不同的視覺效果的設(shè)計，由于無法使用一個元素達(dá)到這種變化。所以需要分別制作兩個不同的元素，再根據(jù)需要進(jìn)行顯示隱藏。
一般而言，某個元素塊隱藏之后，該元素右側(cè)的元素會往左移填充。某行元素隱藏后，該元素以下的元素會上移填充。設(shè)計時遵循此規(guī)律會有利于技術(shù)實(shí)現(xiàn)。
注意：元素切換功能需要謹(jǐn)慎使用，減少設(shè)計需要切換的布局，特別是避免對整一個網(wǎng)頁設(shè)計完全不同的版本。
四、響應(yīng)式樣式
如前文所敘，元素的樣式可以在不同分辨率的視圖內(nèi)進(jìn)行切換。這并不是說我們設(shè)計時可以任意設(shè)計。當(dāng)我們在ps等設(shè)計軟件設(shè)計的樣式無法通過css樣式寫出，而必須使用圖片或其他復(fù)雜的組合來實(shí)現(xiàn)的時候，則難以做到樣式的響應(yīng)式。
這里總結(jié)一些CSS常用的樣式，設(shè)計師只需使用這些樣式來組合設(shè)計，就可以創(chuàng)造出前端容易實(shí)現(xiàn)的響應(yīng)式樣式。
更形象的演示效果請見附件中的Html文件。
(PS：如果想要更深入的了解樣式的響應(yīng)式，還是需要自行了解一下CSS樣式表的寫法。)
五、如何優(yōu)化
接下來，要講的是在響應(yīng)式設(shè)計中，如何合理的對多個端口進(jìn)行布局的調(diào)整，以達(dá)到易于開發(fā)的目的。
1. 保持一致的順序
響應(yīng)式布局由于布局的“善變”，對于內(nèi)容的設(shè)計也不會采用固定的大小和順序。一般來說，內(nèi)容是以流的形式進(jìn)行設(shè)計。對于內(nèi)容流來說，需要遵循從左到右→從上到下的變化。
這樣設(shè)計一是符合現(xiàn)代人的閱讀順序且有利于閱讀順序在不同終端上的一致性；二是更利于快速開發(fā)前端頁面。
對于上圖中，錯誤示范的情況，并非決對不可行，而是一般不建議。這種反常規(guī)的順序，對于開發(fā)來說難度增大許多，而且會產(chǎn)生更多冗余代碼。
例如之前做過的一個網(wǎng)站，就是典型的例子：
2. 盡量不要使用5列
正如前面介紹網(wǎng)格系統(tǒng)時說到過，網(wǎng)格系統(tǒng)一般采用12列、16列、24列等可以均分為多個數(shù)的2倍數(shù)列。當(dāng)你想設(shè)計5均分列、7均分列、9均分列、11均分列等列數(shù)時會發(fā)現(xiàn)，這些網(wǎng)格系統(tǒng)并不能滿足所需。一旦設(shè)計這樣的列數(shù)，就意味著開發(fā)人員需要自己寫這個等分樣式或者修改框架的網(wǎng)格系統(tǒng)，降低其效率降低。
并且，這些列數(shù)將比較難和現(xiàn)有的網(wǎng)格系統(tǒng)交互使用，使得響應(yīng)式的設(shè)計收到影響，開發(fā)也同時受到這些影響。
3. 減少模塊的增減
即便CSS3提供了媒體查詢和元素的顯示隱藏功能，但是我們依然還是盡量的減少通過隱藏模塊的方式來向下兼容低分辨率的顯示器。
因?yàn)檫@樣做雖然可以增加用戶體驗(yàn)，但是對于流量和代碼復(fù)雜度都沒有任何幫助。
特別對于受眾面廣的門戶網(wǎng)站來說，可以說寸流量寸金，這樣的響應(yīng)式布局，即便你把移動端的頁面設(shè)計得非常非常簡潔，那些隱藏起來的部分也僅僅只是隱藏起來了，它依然會被下載到你的移動設(shè)備上。
現(xiàn)階段來說，更好的解決方案，依然是給移動端單獨(dú)設(shè)計一套頁面，單獨(dú)開發(fā)一套代碼。這樣做除了節(jié)省流量外，也能更好的針對移動端的操作習(xí)慣進(jìn)行設(shè)計，而不用為了兼容更多的終端而犧牲了一些體驗(yàn)。
4. 樣式統(tǒng)一
同一個模塊在不同終端上盡量做到統(tǒng)一樣式。畢竟視覺效果更統(tǒng)一的話，品牌感會比較強(qiáng)。對于設(shè)計師的你來說，視覺規(guī)范更容易寫，更容易維護(hù)。
而開發(fā)人員也會感激你的，因?yàn)樗挥脼椴煌臉邮饺ゾ帉?、去維護(hù)更多的樣式表。
而代碼越少，加載越快，用戶體驗(yàn)也越好。
5. 移動優(yōu)先
有沒有發(fā)現(xiàn)，許多優(yōu)秀的響應(yīng)式網(wǎng)站，設(shè)計總是那么的簡潔大方，對手機(jī)等小屏設(shè)備的支持總是那么的完美，用戶體驗(yàn)好到飛起。
因?yàn)樗麄儾捎玫氖且苿觾?yōu)先的設(shè)計原則。移動優(yōu)先這個詞是伴隨著響應(yīng)式而出現(xiàn)的，主要是因?yàn)橐苿佣说牟季趾凸δ芸偸潜雀蟮脑O(shè)備簡單。
而從簡單到復(fù)雜的過程總是比從復(fù)雜到簡單的過程容易。
而在大屏設(shè)備上觀看簡潔的內(nèi)容也總是比在小屏設(shè)備上觀看復(fù)雜的內(nèi)容來得舒服。
于是，當(dāng)我們設(shè)計響應(yīng)式網(wǎng)頁的時候，應(yīng)該考慮從移動端開始，先設(shè)計移動端的頁面，然后再設(shè)計更大的屏幕，往其中增加更復(fù)雜的布局和內(nèi)容，最終實(shí)現(xiàn)從移動端到超大屏幕的漸進(jìn)增強(qiáng)。
六、什么時候選擇響應(yīng)式設(shè)計
響應(yīng)式設(shè)計的誕生是為了解決不同分辨率的終端的適配問題，那么它是網(wǎng)頁設(shè)計的最佳方案嗎？它可以解決所有網(wǎng)頁設(shè)計的問題嗎？
答案是否定的。時至今日，響應(yīng)式的研究已經(jīng)日趨成熟，然而，它仍然只能適用于一部分場景。如果你的項(xiàng)目符合以下幾點(diǎn)，那么響應(yīng)式設(shè)計會是個不錯的選擇：
1. 需要更強(qiáng)的兼容性
響應(yīng)式誕生的目的就是為了解決不同終端的兼容問題，所以如果你的項(xiàng)目需要兼容多種不同的設(shè)備，那么可以考慮響應(yīng)式設(shè)計。
2. 節(jié)約維護(hù)成本
響應(yīng)式布局雖然相較于靜態(tài)布局開發(fā)難度大，但是維護(hù)成本更低。
相對于多個終端多個版本的頁面來說，無論是修改代碼還是運(yùn)維都只需要對一個內(nèi)容進(jìn)行操作，而無需對每個端口單獨(dú)維護(hù)。
3. 以展示為主的站點(diǎn)
如果你的網(wǎng)站是功能型的，而且非常復(fù)雜的話，不要考慮響應(yīng)式，因?yàn)轫憫?yīng)式的頁面代碼冗余很大，不利于復(fù)雜網(wǎng)站的開發(fā)。
相反如果你的網(wǎng)站是以內(nèi)容展示為主的話，會比較適合使用響應(yīng)式布局。
4. 不考慮舊的瀏覽器
由于響應(yīng)式布局的很多實(shí)現(xiàn)手段是基于CSS3的，對于某些較老的瀏覽器，會出現(xiàn)兼容問題。(“IE”我說的就是你，別東張西望！)
所以，如果需要考慮一些舊瀏覽器的兼容問題的話，那還是乖乖的做靜態(tài)布局吧。
...
附件是一份用于演示本文所提到的各種響應(yīng)式的實(shí)現(xiàn)效果的Html，請打開目錄下的index.html 體驗(yàn)。不要使用低版本的IE打開。
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
