白話分析自適應跟響應式的區別

根據平常開發經驗及網上相關資料，用簡單通俗易懂的大白話分析自適應跟響應式的區別。注：本文只分析自適應跟響應式的區別以及瞭解其由來的背景，不在於討論其使用的方法

1、什麼是自適應佈局

自適應佈局就是寬度自適用佈局，在不一樣大小的設備上，網頁以等比例的形式縮放寬度，呈現一樣的主體內容和排版佈局

自適應佈局演示圖

隨着屏幕寬度縮放，網頁內容也以等比例縮放，無論屏幕寬度爲多少，網頁主體排版佈局老是同樣的

2、什麼是響應式佈局

響應式佈局就是根據屏幕大小變化，頁面的內容排版佈局會自動調整變更，已呈現更好的用戶體驗

響應式佈局演示圖

隨着屏幕寬度的縮放，頁面作出相應調整，佈局和展現的內容會有所變更

1.自適應佈局出現的背景

在PC時代初期，網頁設計者都會設計固定寬度的頁面，最開始的電腦顯示器分辨率種類很少，由於當時電腦原本就少。後來隨着顯示器種類愈來愈多，以及筆記本、平板電腦的普及，這種固定寬度的頁面出現了問題。因而出現了一種新的佈局方式，寬度自適應佈局。咱們平時談論的自適應佈局，大多指的就是寬度自適應佈局

再到後來，互聯網大戰從PC打到了手機，還有 HTML5 標準的發佈。自適應佈局也從PC延伸到手機，自適應佈局也所以火了起來，成爲網頁設計的必要需求

2.響應式佈局出現的背景

自適應雖然成爲網頁設計的必要需求，但仍是暴露出一個問題，若是屏幕過小，即便網頁內容可以根據屏幕大小進行適配，可是在小屏幕上查看，會感受內容過於擁擠，下降了用戶體驗。此時，爲了解決這個問題而衍生出來的概念就是響應式佈局。它能夠自動識別屏幕寬度、並作出相應調整。網頁的排版佈局和展現的內容會有所變更

最後

以爲文章不錯的，給我點個贊哇，關注一下唄！
技術交流可關注微信公衆號【GitWeb】，加我好友一塊兒探討
微信交流羣：加好友（備註思否）邀你入羣，抱團學習共進步