流式佈局：

流式佈局在CSS2時代就有，主要是靠百分比進行排版，可以在不同解析度下顯示相同的版式。

流式佈局：網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設定網頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。

這種佈局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC螢幕（那是螢幕尺寸的差異不會太大），在當今的移動端開發也是常用佈局方式，但缺點明顯：寬度使用百分比定義，但是高度和文字大小等大都是用px來固定，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協調。

響應式佈局：

響應式佈局的關鍵技術是CSS3中的媒體查詢，監測裝置螢幕大小，通過css媒體查詢來有針對性的更改頁面的佈局，可以監測螢幕方向(移動裝置)，裝置型別等等，核心在於感知。在不同螢幕下可以顯示不同版式。響應式是用於解決不用裝置之間不用解析度之間的相容問題(一般是指PC，平板，手機等裝置之間較大的解析度差異)

響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，

嗯，因為是css3時代才有的新技術，那坑爹的IE6、7、8鐵定不支援了，所以，記得使用媒體查詢的時候要用js做一下小小的相容哦！

對於IE6/IE7/IE8瀏覽器，我們使用JavaScript，根據使用者顯示器的解析度，為其動態建立一個CSS 檔案，在頭部head標籤中嵌入如下的code：

<script>
if (!window.screenX) {
    //IE6~8
    var oStyle = document.createElement("link");
    oStyle.rel = "stylesheet";
    oStyle.type = "text/css";
    if (screen.width > 1024) {
        oStyle.href = "widthScreen.css";	
    } else {
        oStyle.href = "normalScreen.css";	
    }
    document.getElementsByTagName("head")[0].appendChild(oStyle);
}
</script>
 

對CSS編寫者而言，在實現上不拘泥於具體手法，但通常是糅合了流式佈局+彈性佈局，再搭配媒體查詢技術使用。