自適應網頁設計使用針對不同屏幕尺寸定制的兩個或多個版本的網站。根據網站如何檢測需要顯示的“版本”,可以將自適應網站分為兩個主要類別。
根據設備類型進行調整
當您的瀏覽器(又名客戶端)連接到網站時,HTTP請求將包含一個名為“用戶代理”的字段,該字段通知服務器有關嘗試查看該頁面的設備類型。基本上,這意味著網站知道要顯示的版本(例如:台式機或移動版)。這種方法的唯一問題是,如果在桌面上縮小瀏覽器窗口,該頁面將無法顯示,因為它會繼續顯示完整的“桌面版本”。
根據瀏覽器寬度進行調整
該網站不使用“用戶代理”,而是使用媒體查詢和斷點在版本之間進行切換。因此,您將擁有1080px,768px和480px寬度的版本,而不是台式機,平板電腦和移動版本。除了在設計時提供更大的靈活性之外,這種方法還可以在大屏幕上更改瀏覽器大小時提供更“響應”的外觀。
優點
所見即所得編輯(所見即所得)自定義設計無需代碼即可更快,更輕鬆地構建跨瀏覽器和跨設備兼容性快速加載頁面。
缺點
在桌面上的小瀏覽器窗口中查看時,使用“設備類型”的網站可能看起來很破損局限性,只有響應型網站才能完成某些限制。

響應式網站
響應式網站結合使用靈活的網格(基於百分比)和斷點(使用媒體查詢),以針對每種屏幕尺寸創建自定義外觀。與僅在遇到斷點時才自適應的自適應網站不同,自適應網站會根據屏幕尺寸不斷變化。
優點
無論使用哪種設備類型,各種尺寸的屏幕都具有出色的體驗。響應式網站建設者通常都很僵化,這使得設計難以“突破”成噸的可用模板。
缺點
需要大量的設計和測試以確保質量(從頭開始)如果不訪問代碼,定制設計可能會面臨挑戰。