響應式 自適應式

一點點補充

1、靜態布局（static layout）

2、流式布局（liquid layout）

3、自適應布局（adaptive layout）

4、響應式布局（responsive layout）

5、彈性布局（rem/em布局）

關於響應式布局，可使用  css3 @media 查詢  和  rem響應式布局  來製作響應式設計 。

可能有不少人對響應式**和自適應**都存在誤解，會以為這兩者都是同一型別的**，只是叫法不一樣。但是如果通過實際的瀏覽體驗，就能分辨出它們的區別。可以說自適應只是響應式當中的乙個子集，也就是說響應式的開始形態是自適應。 

什麼是響應式布局？

響應式網頁布局設計就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。打個比方來說：現在社會有很多響應產品，例如摺疊沙發，折疊床等等，當我們需要把沙發放到乙個角落的時候，此刻沙發就好比div吧，而角落裡的某個地方就好比父元素，由於父元素空間的改變，我們不得不調整div,讓它能夠依然放在角落裡。在專案中你會遇到不同的終端，由於終端解析度不同，所以你要想讓使用者體驗更好，就必要讓你的頁面能夠相容多個終端。

什麼是自適應布局？

總的來說響應式與自適應的原理是相似的，都是檢測裝置，根據不同的裝置採用不同的css，而且css都是採用的百分比的，而不是固定的寬度，不同點是響應式**在不同的裝置上看上去是不一樣的，會隨著裝置的改變而改變模板樣式、模組排版、展示樣式。

引：

響應式布局與自適應布局的區別：

1.自適應布局通過檢測視口解析度，來判斷當前訪問的裝置是：pc端、平板、手機，從而請求服務層，返回不同的頁面；響應式布局通過檢測視口解析度，針對不同客戶端在客戶端做**處理，來展現不同的布局和內容。

2.自適應布局需要開發多套介面，而響應式布局只需要開發一套介面就可以了。

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

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

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

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

自適應布局：使用 @media **查詢給不同尺寸和介質的裝置切換不同的樣式。

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

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

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

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

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

3、自適應布局：分別為不同的螢幕解析度定義布局，即建立多個靜態布局，每個靜態布局對應乙個螢幕解析度範圍。

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

1、對於一些邏輯業務不同終端不同處理方式，不是很友好

2、響應式**無法區分移動端，浪費頻寬，載入耗時長。

這樣的話，響應式**載入的內容相比非響應式**會增加20-50%。載入內容多，速度慢，浪費流量。響應式**相對非響應式**的載入耗時，一般都會延長1-2秒，在2g、3g網路情況下更嚴重。所以有的時侯，使用者體驗不是很好。

（引：    可以參考、有點以偏概全的一篇文章）

共同學習，共同進步，若有補充，歡迎指出，謝謝！

響應式與自適應

ldjman 一 響應式 1 何為響應式 響應式就是 返回乙個 展示檔案，瀏覽器根據螢幕的大小而採用不同布局的視覺最適合的效果，意思同乙個 就是不同的螢幕大小會形成不同布局效果，目的都是為了根據螢幕的大小展現出最優的展示效果。三 響應式與自適應的對比 響應式 自適應 布局不一樣，根據螢幕的大小而匹配...

響應式和自適應的區別

玩前端也有幾個月了，發現大家普遍混淆了響應式和自適應的概念。先給大家體驗一下響應式和自適應的區別，請放大縮小一下螢幕嘗試 自適應的體驗 響應式的體驗 起初，網頁設計者都會設計固定寬度的頁面，最開始的電腦顯示器解析度種類不多，因為當時電腦本來就少，即使有變化也是 800 850 870 880。比如 ...

響應式與自適應的區別

什麼是自適應 awd adaptive design 是 aaron g.的一本技術書的標題，時間要比rwd晚一些。他認為 awd 在包括 rwd 的 css media query 技術以外，awd 有可能會針對移動端使用者減去內容，減去功能。awd 可以在伺服器端就進行優化，把優化過的內容送到終...