一、瀏覽器
首先要考慮的是瀏覽器。瀏覽器是所有頁面運行的環境。從圖像上講,網站是內容物,瀏覽器是存儲內容物的容器。所有網頁都必須通過瀏覽器運行,因此網頁設計的第一步是了解瀏覽器pc有5種常用的瀏覽器,而手機上有30種瀏覽器軟件。但需要注意的是,許多瀏覽器并不是一個完全獨立的瀏覽器,其中許多只是基于相同的瀏覽器,特別是AndroidWebKit只是不同版本。
手機上有四種類型的瀏覽器:內置瀏覽器、下載瀏覽器、代理瀏覽器和WebView。目前安卓和IOS它占據了移動終端的大部分市場。因此,為了減少工作量,我們可以首先確保Android和布局設計IOS其他瀏覽器可根據實際情況和成本進行操作。
二、視覺
響應性網站設計的另一個關鍵點是視角。視角的概念不是我們所理解的設備的屏幕尺寸。屏幕尺寸是設備的物理顯示區域。視角是指瀏覽器窗口中的內容區域,但不包括標簽欄、工具欄等。網頁的實際顯示區域是視角。在桌面瀏覽器中,只有一個視角,即瀏覽器窗口。手機上有以下三個視角:
1.布局視圖:與移動瀏覽器屏幕寬度無關,僅限CSS的布局。
2.理想視野:蘋果首先引進的設備布局視野尺寸最理想,瀏覽閱讀寬度最理想。
3.視覺視覺:當用戶看到網站區域時,用戶可以縮放視覺視覺。
響應式布局最基本的工作是將布局視角的大小設置為理想視角。
三、媒體查詢
所謂的媒體查詢實際上是CSS中的if它允許我們根據設備顯示器的特性設置特定的句子CSS樣式。通過適當的媒體查詢,可以很容易地根據設備屬性改變頁面內容的顯示模式。
真正的響應式設計方法顛覆了我們當前的網頁設計方法。熟悉以上三個方面意味著你有設計響應式網站的基礎,可以進一步學習。