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

NO IMAGE

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

一、什麼是自適應佈局

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

自適應佈局演示圖:

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

隨著屏幕寬度縮放,網頁內容也以等比例縮放,不管屏幕寬度為多少,網頁主體排版佈局總是一樣的

二、什麼是響應式佈局

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

響應式佈局演示圖:

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

隨著屏幕寬度的縮放,頁面做出相應調整,佈局和展示的內容會有所變動

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

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

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

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

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

最後

覺得文章不錯的話,給我個關注哇,點個讚唄!

如果對文章有疑問或想技術交流,可關注公眾號【GitWeb】與我一起探索學習!

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

相關文章

一個孤獨中二患者的自白|年度徵文

前端必備的實用工具,都在這裡了

JavaScript進階之道

Python進階之道