響應式和自適應有什么區別？

1、靈活性不同：

靜態布局：毫無靈活性可言，目前已逐漸被淘汰。

自適應布局：靜態布局的升級版，因其強大的靈活性，已逐漸成為高端網頁的代名詞。

流式布局：靈活性更高，可適用于其他三種網站布局。

響應式布局：自適應布局的升級版，響應式網站要普遍適應市面上各類屏幕，開發難度和工作量都是非常大的，開發價格自然比普通網站高。

2、設計方法不同：

靜態布局：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分。

自適應布局：使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。

流式布局：使用百分比定義寬度，高度大都是用px來固定，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種分辨率。

響應式布局：媒體查詢+流式布局。使用@media媒體查詢和網格系統配合相對布局單位進行布局，就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同設備返回不同樣式的技術統稱。

擴展資料：

靜態、自適應、流式、響應式四種網頁布局的特點概括

1、靜態布局：即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。

2、流式布局：頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變。這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。

3、自適應布局：分別為不同的屏幕分辨率定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕分辨率范圍。

4、響應式布局：分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。