一、瀏覽器

首先要考慮的是瀏覽器。瀏覽器是所有頁面運行的環境。從圖像上講，網站是內容物，瀏覽器是存儲內容物的容器。所有網頁都必須通過瀏覽器運行，因此網頁設計的第一步是了解瀏覽器pc有5種常用的瀏覽器，而手機上有30種瀏覽器軟件。但需要注意的是，許多瀏覽器并不是一個完全獨立的瀏覽器，其中許多只是基于相同的瀏覽器，特別是AndroidWebKit只是不同版本。

手機上有四種類型的瀏覽器:內置瀏覽器、下載瀏覽器、代理瀏覽器和WebView。目前安卓和IOS它占據了移動終端的大部分市場。因此，為了減少工作量，我們可以首先確保Android和布局設計IOS其他瀏覽器可根據實際情況和成本進行操作。

二、視覺

響應性網站設計的另一個關鍵點是視角。視角的概念不是我們所理解的設備的屏幕尺寸。屏幕尺寸是設備的物理顯示區域。視角是指瀏覽器窗口中的內容區域，但不包括標簽欄、工具欄等。網頁的實際顯示區域是視角。在桌面瀏覽器中，只有一個視角，即瀏覽器窗口。手機上有以下三個視角：

1.布局視圖:與移動瀏覽器屏幕寬度無關，僅限CSS的布局。

2.理想視野:蘋果首先引進的設備布局視野尺寸最理想，瀏覽閱讀寬度最理想。

3.視覺視覺：當用戶看到網站區域時，用戶可以縮放視覺視覺。

響應式布局最基本的工作是將布局視角的大小設置為理想視角。

三、媒體查詢

所謂的媒體查詢實際上是CSS中的if它允許我們根據設備顯示器的特性設置特定的句子CSS樣式。通過適當的媒體查詢，可以很容易地根據設備屬性改變頁面內容的顯示模式。

真正的響應式設計方法顛覆了我們當前的網頁設計方法。熟悉以上三個方面意味著你有設計響應式網站的基礎，可以進一步學習。