什么是響應式設計？做響應式設計時需要避免的常見誤區有哪些？
什么是響應式設計？做響應式設計時需要避免的常見誤區有哪些？
發布日期：2018-05-04
瀏覽次數：3195
現在很多站長在做網站時都比較傾向于響應式設計，這是因為一個響應式網站就可以完全適應不同尺寸的設備。除此以外，響應式網站也沒有縮放布局和流式布局的一些缺點。但在設計響應式網站時我們也要多加注意，仔細規劃，才能更好的發揮✨這種設計的效用。今天這篇文章主要就是講解縮放、流式和響應式布局的區別，響應式網站常見的3個問題，以及如何避免這些問題的產生。
縮放布局VS流式布局VS響應式布局
很多人經常會弄混這三個概念，認為它們都差不多，可以隨意替換使用。事實上，每一個概念都是不同的，都是不同科技發展階段流行的網站布局方式。接下來小飛就帶大家看看這3種網站布局設🧔計的區別。
縮放布局
是指對網站中的每個元素進行縮放。從某種程度上來說，縮放布局有點響應式設計的味道，因為它會根據視窗尺寸的改變相應的縮放網站上的內容。不過，它與響應式布局的差別就在💯于，在進行縮放時，窗口整體布局是靜止不動的，只改變網站里的每♏個元素，使它們協調一致。下圖為縮放布局在不同屏幕分辨率中的呈現，這種設計可以保證網站各種元素的協調一致，但這是以犧牲網站內容的可讀性為代價的。
流式布局，
也叫作百分比布局，是指將元素的寬、高、內邊距，外邊距設置成百分比，而不使用固定數值，這樣一來網站元素可以根📖據頁面的尺寸隨時調整。通常，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前頁尾，所以人們形象的稱之為流式布局。這種布局方式在web前端開發的ꦬ早期歷史上有很廣泛的使用，適用于不同尺寸的PC屏幕（那時屏幕的尺寸差異不會太大）。但是現在很多人使用手機瀏覽網頁，使用這種布局方式設計網站，可能就會影響圖片、文字在小屏幕設備上的顯示效果，破壞網站的協調性、一致性。下圖是流式布局在不同屏幕分辨器上的呈現，這種設計能夠提供用戶舒適的閱讀體驗但是忽略了網站元素的整體一致。
響應式布局是
隨著媒體查詢技術的出現而問世的，它主要是為了解決不同設備之間的兼容問題（一般是指PC，平板，手機等分辨率差異較大的設備）。這種技術可以根據視窗的大小改變網站的呈現方式。下圖是響應式布局在不同屏幕分辨器中的呈現，它同時兼顧了網站內容的可讀性和布局格式的💧一致性。
雖然響應式網站布局有很多優點，同時適用于多種設備，在不同客戶端給用戶提供舒適的瀏覽體🍬驗，節約不同頁面的人力開發成本，便于SEO優化。但是𓆉，在我們設計響應式網站的過程中常會發現它也存在一些問題，這些問題是怎么產生的呢？又該怎樣解決呢？小飛今天列舉了響應式網站設計中常見的3個問題以及相應的解決方法，希望大家能夠從中得到啟發。
問題1.菜單分行
如果你在網頁的上方💞使用了導航欄，當這個頁面在小屏幕的設備上呈現時，響應式設計通常會將這個導航菜單壓縮到更緊湊的格式，以在小屏幕中實現良好的呈現。但這并不總是有效的，如果顯示區域比斷點要寬（斷點，通俗來講就是換行處），又不足夠在一行中將所有的菜單逐一呈現出來，這時就會出現菜單分行的情況（見下圖，紅色欄即為分行的菜單欄）。導航菜單在頁面的上方，訪客訪問網站𒅌時很容易就會注意到這一點，菜單分行會給用戶留下比較差的第一印象。那么怎樣才能避免菜單分行情況的發生呢？
解決這個問題有好幾種方法，第一種方法就是減少導航菜單上水平展示的菜單欄的數量。當菜單欄選項較多時，我們可以對它們進行相應的整合，分成類別和子類別。子類別可以在用戶選擇類別的時候通過下拉菜單的方式𓄧顯示，這樣橫排的菜單欄就會減少了。第二種方法就是將斷點設為更低的值。斷點的實際值應該是導航菜單🍸可能無法顯現的寬度，而不是某個特定設備的尺寸。
問題2.使用固定寬度的圖片
網站的內容區域一般隨視窗的大小而改變，所以當一個固定寬度的圖片比內容區域要寬的時候，圖片就會被剪裁，只在屏幕上顯示一部分。下面的是使用固定寬度圖片典型的一個栗子，頁面圖片和內容在電腦上顯示的很好，但是由于手機尺寸相對電腦而言較小，可顯示的內容區域也有所縮小，這時部分圖片不能一下子顯示出來，只能借助圖片滾動條。本來用戶選擇手機瀏覽網站就是奔著快速、便捷去的，現在卻要滑動滾動條💃查看全圖，這種瀏覽體驗對𒀰用戶來說實在是太糟糕了，一點都沒有發揮響應式布局的優點。
這個問題要怎么解決呢？我們可以給圖片設置相關單位，或者使用支持響應式的框架（比如Bootstrap）， 用響應式圖片class名來控制（🍒例如class="img-responsive"）。同樣的元素在使用響應式圖片class名控制后，圖片可以在手機上很好的展現，圖片的滾動條也消失了（見下圖）。
問題3.元素失真
這個問題可能聽上去更加抽象，但是當響應式網站在小屏幕設備如手機上呈現時，它又真實的發生著。打個比方來說，未經處理過的列變成了行，這就是一種形式的元素失真，這樣聽上去是不🔯是會更有概念一些？元素失真并不是一個簡單的問題，因為它常常會影響網站的這個布局結構。比如在下圖中，在電腦中3個圖片或文本是并列的，但在手機上顯示時第3個圖片或文本就單獨成一行了，這影響了網站內容的ღ整體結構。
對于解決元素失真這個問題其實很簡單：明確的設置網站各個元素的高、寬和內邊距，但是意外的是很多人還在糾結怎樣解決這個問題。另外，如果某個元素不在它應在♌的位置，覆蓋住了其他元素，我們可以使用di🌟v（簡單來說div就是一個塊狀的東西，有人稱它為盒子，我們可以將網站中的各個元素分類放進去，便于網站布局管理），設置外邊距，讓它回到原本的位置。
本篇文章只討論了響應式網站設計中可能會遇到的3個問題，但是做出一個優秀、成功的網站我們可能還會有很多彎路要走。怎樣才能有效避免可能遇到的問題呢？這需要我們好好規劃設計自己的網站，而且現在很多瀏覽🐓器都內置了響應式布局測試，不斷的進行測試，我們就能逐漸做出自己滿意的網站，畢竟實踐是檢驗真理的唯一標準嘛。快來起飛頁自助建站平臺做一個響應式網站吧！