縮放布局VS流式布局VS響應式布局

 

很多人經常會弄混這三個概念，認為它們都差不多，可以隨意替換使用。事實上，每一個概念都是不同的，都是不同科技發展階段流行的網站布局方式。接下來小編就帶大家看看這3種網站布局設計的區別。

 

縮放布局是指對網站中的每個元素進行縮放。從某種程度上來說，縮放布局有點響應式設計的味道，因為它會根據視窗尺寸的改變相應的縮放網站上的內容。不過，它與響應式布局的差別就在于，在進行縮放時，窗口整體布局是靜止不動的，只改變網站里的每個元素，使它們協調一致。這種設計可以保證網站各種元素的協調一致，但這是以犧牲網站內容的可讀性為代價的。

 

流式布局， 也叫作百分比布局，是指將元素的寬、高、內邊距，外邊距設置成百分比，而不使用固定數值，這樣一來網站元素可以根據頁面的尺寸隨時調整。通常，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前頁尾，所以人們形象的稱之為流式布局。這種布局方式在web前端開發的早期歷史上有很廣泛的使用，適用于不同尺寸的PC屏幕(那時屏幕的尺寸差異不會太大)。但是現在很多人使用手機瀏覽網頁，使用這種布局方式設計網站，可能就會影響圖片、文字在小屏幕設備上的顯示效果，破壞網站的協調性、一致性。下圖是流式布局在不同屏幕分辨器上的呈現，這種設計能夠提供用戶舒適的閱讀體驗但是忽略了網站元素的整體一致。

 

響應式布局是 隨著媒體查詢技術的出現而問世的，它主要是為了解決不同設備之間的兼容問題(一般是指PC，平板，手機等分辨率差異較大的設備)。這種技術可以根據視窗的大小改變網站的呈現方式。它同時兼顧了網站內容的可讀性和布局格式的一致性。